CSS circular shape with drop shadow and bottom border
UPDATE So I just learned about the elliptical border radius. Achieved pretty much the same result I was looking for, but the border thickens with an ellipsis, so if anyone knows of a better approach, I'm still looking. Here's my JSfiddle - Result looks like this
The code used in the script
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) ;
ORIGINAL MAIL
I am wondering if it is possible to create a form similar to the one below
The shape will overlap the image. I know I can create a recursive DIV with border-bottom-left-radius
, then give it border-bottom: 3px solid green
and drop-shadow
, but the border radius really won't reach the same "corner" as the one pictured above.
I thought I was just using SVG, but then I can't have a shadow. Therefore, if there is any way to create such a shape with a drop shadow, I am open to all suggestions. Thanks you
source to share
Border-Radius
You can simply add the same style border-radius
to the right by taking up the other 30% you left.
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
You can also explore clip-path
to get the area you want. Unfortunately, this does not allowbox-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 you need with 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>
SVG to match usage requirements
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>
source to share
I used an inner shadow instead of border-bottom, it keeps the line pretty honest (you can try setting the first value box-shadow:inset
to 1 or 2px to move the green shadow to the right). JSFiddle
Html
<div class="container">
<div class="line-shadow"></div>
<div class="line"></div>
</div>
CSS
.container {
position: relative;
width: 900px;
height: 600px;
overflow: hidden;
}
.line-shadow{
position: absolute;
bottom: 21px;
left: -19px;
width: 1000px;
height: inherit;
border-bottom-left-radius: 800px 150px;
border-bottom-right-radius: 800px 30px;
-webkit-box-shadow: 0 0 12px 1px #000000;
box-shadow: 0 0 12px 1px #000000;
background-image: url(http://filepic.ru/file/1438005661.jpg);
background-size: cover;
}
.line {
position: absolute;
bottom: 20px;
left: -20px;
width: 1000px;
height: inherit;
border-bottom-left-radius: 800px 150px;
border-bottom-right-radius: 800px 30px;
-webkit-box-shadow:inset 0 0 0 4px #6db43d;
box-shadow:inset 0 0 0 4px #6db43d;
}
There's an obvious downside - too many divs. But you can try using css ::after
instead of a single div.
source to share