问题描述
更新所以我才发现椭圆边界的半径.达到了我一直在寻找的相同结果,但是边界加了省略号,所以如果有人知道我仍在寻找更好的方法.
UPDATE So I just found out about elliptical border radius. Achieved almost the same result I was looking for, but the border thickens with the ellipsis so if anyone know's about a better approach I'm still looking.
小提琴中使用的代码
border-bottom: 3px solid green;
-moz-border-radius-bottomleft: 70% 40px;
-webkit-border-bottom-left-radius: 70% 40px;
-webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ;
box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ;
原始帖子
我想知道是否可以创建与以下形状相似的形状
I am wondering if it is possible to create a shape similar to the one below
形状将与图像重叠.我知道我可以用border-bottom-left-radius
创建一个环形DIV,然后将其赋予border-bottom: 3px solid green
和drop-shadow
,但是边界半径并不能真正实现与上图中相同的角度".
The shape would be overlaping an image. I know I could create a recntagular DIV with a border-bottom-left-radius
then give it border-bottom: 3px solid green
and drop-shadow
, but the border radius doesn't really achieve the same "angle" as the one in the image above..
我以为我只会使用SVG,但是这样我就没有阴影了.因此,如果有任何方法可以用阴影创建这样的形状,那么我可以接受所有建议.谢谢
I thought I would just use an SVG, but then I can't have the drop shadow.. So if there is any way to create a shape like this with the drop shadow I am open to all suggestions. Thank you
推荐答案
边界半径
您可以在右侧添加相同的样式border-radius
,占据剩下的30%.
Border-Radius
You could just add the same style border-radius
to the right, taking up the other 30% you have left over.
body {
background: lightblue;
}
#box {
width: 500px;
height: auto;
border-bottom: 3px solid green;
-moz-border-radius-bottomleft: 70% 40px;
-webkit-border-bottom-left-radius: 70% 40px;
-moz-border-radius-bottomright: 30% 20px;
-webkit-border-bottom-right-radius: 30% 20px;
-webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
}
<img id="box" src="http://www.hdwallpapersinn.com/wp-content/uploads/2014/11/Sunset-Cityscape-Scene.jpg" />
您也可以考虑使用clip-path
来获取所需的区域.可悲的是,这不允许box-shadows
You could also look into using a clip-path
to get the area you want. Sadly, this doesn't allow for box-shadows
body {
background: lightblue;
}
.container {
-webkit-clip-path: ellipse(100% 56% at 71% 39%);
clip-path: ellipse(100% 56% at 71% 39%);
width: 500px;
height: auto;
background: green;
}
img {
-webkit-clip-path: ellipse(100% 56% at 71% 39%);
clip-path: ellipse(100% 56% at 71% 39%);
width: 500px;
height: auto;
}
<div class="container">
<img src="http://www.hdwallpapersinn.com/wp-content/uploads/2014/11/Sunset-Cityscape-Scene.jpg" />
</div>
您还可以使用SVG获得所需的形状.
You can also achieve the shape required with an SVG.
body {
background: lightblue;
}
<svg width="500" height="250" viewBox="0 0 100 50">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height="50" width="100">
<image x="0" y="0" height="50" width="100" xlink:href="https://31.media.tumblr.com/cd4319a4a4ba642649bcf7936d48eec8/tumblr_inline_mn089qqjI71qz4rgp.png"></image>
</pattern>
<filter id="blur" x="0" y="0" width="100%" height="110%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="1" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g class="curve">
<path fill="url(#image)" filter="url(#blur)" stroke="green" stroke-width="1" d="M-1,-1
L-1,40
C-1,40 60,45 101,42
L101,-1z" />
</g>
</svg>
body {
background: lightblue;
margin: 0;
padding: 0;
}
<svg width="100%" viewBox="0 0 100 50" preserveAspectRatio="none" height="150px">
<defs>
<filter id="blur" x="0" y="0" width="100%" height="110%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="1" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path fill="#ffffff" filter="url(#blur)" stroke="green" stroke-width="1" d="M-1,-1
L-1,40
C-1,40 60,45 101,42
L101,-1z" />
</svg>
这篇关于带有阴影和边框底的圆形CSS形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!