Circular CSS shape with drop shadow and border-bot

问题:

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. Here's my JSfiddle - Result looks like this

Code used in fiddle

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 POST

I am wondering if it is possible to create a shape similar to the one below

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..

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

回答1:

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

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>

Clip Path Support

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>

SVG to fit use 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>

回答2:

I used inner shadow instead of border-bottom, it keeps thickens of the line pretty honestly (you can try to set first value of box-shadow:inset to 1 or 2px in order to move 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 disadvantage - too many divs. But you can try to use css ::after instead of one div.