圆形CSS形状,带阴影和边框底部

Question

更新所以我刚刚发现椭圆边界半径.实现了我所寻找的几乎相同的结果,但是边框随着省略号变粗,所以如果有人知道关于更好的方法,我仍然在寻找.这是我的JSfiddle - 结果看起来像这样

用于小提琴的代码

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) ;

原始邮政

我想知道是否有可能创建一个类似下面的形状

形状将重叠图像.我知道我可以创建一个recntagular DIV具有border-bottom-left-radius然后给它border-bottom: 3px solid green和drop-shadow,但边界半径并没有真正达到相同的"角"为一个以上的图像中..

我以为我会使用一个SVG,但是我不能有投影..所以如果有任何方法可以用投影创建这样的形状,我会对所有建议开放.谢谢

Answer 1

边界半径

您可以border-radius在右侧添加相同的样式,占用剩余的30%.

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" />

夹路径

你也可以考虑使用a clip-path来获得你想要的区域.可悲的是,这是不允许的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

您还可以使用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符合使用要求

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>