CSS：仅在底部的椭圆剪裁蒙版？

Question

我正在尝试在CSS中的图像上创建一个弯曲的剪贴蒙版。

曲线基本上只是一个非常宽的椭圆的下半部分。

要求是角度/曲率不会根据图像的高度/宽度而改变 - 它应始终保持一致。

这是一个视觉效果：

尝试1：border-radius / overflow hidden / fixed width

问题：图像高度影响曲率，没有最大宽度

img { max-width: 100%; vertical-align: top; }
.block { max-width: 320px; background: blue; }
.block-2 { max-width: 200px; background: blue; }

.curve {
  overflow: hidden;
  width: 500px;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -250px;
  text-align: center;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="block">
  <div class="curve">
    <img src="http://placehold.it/320x180" />
  </div>
</div>

<br />

<div class="block-2">
  <div class="curve">
    <img src="http://placehold.it/320x100" />
  </div>
</div>

尝试2：明显的单一作物图像

问题：大小之间仍然不一致但是很接近。但是，客户/ CMS可能意味着无法选择。

尝试3：剪辑路径

问题：曲线不一致，支持flakey，没有任何IE支持

http://caniuse.com/#feat=css-clip-path

.img1 { 
  max-width: 240px; 
  clip-path: ellipse(150% 100% at 50% 0); 
  -webkit-clip-path: ellipse(150% 100% at 50% 0); 
}
.img2 { 
  max-width: 320px; 
  clip-path: ellipse(150% 100% at 50% 0);
  -webkit-clip-path: ellipse(150% 100% at 50% 0);
}
.img3 { 
  max-width: 640px; 
  clip-path: ellipse(150% 100% at 50% 0);
  -webkit-clip-path: ellipse(150% 100% at 50% 0);
}

<img src="http://placehold.it/640x320" class="img1" />
<img src="http://placehold.it/550x100" class="img2" />
<img src="http://placehold.it/640x320" class="img3" />

尝试4：CSS掩码

问题：不一致的曲线受宽度/高度影响，没有IE支持。

img { 
  mask: url(http://s17.postimg.org/qo8izn6kf/mask.png) top center / 120% 100%; 
  -webkit-mask: url(http://s17.postimg.org/qo8izn6kf/mask.png) top center / 120% 100%;
}

<img src="http://placehold.it/640x320" width="240" />
<img src="http://placehold.it/640x320" width="320" />

<br />

<img src="http://placehold.it/640x100" width="480"/>
<img src="http://placehold.it/200x200" />

尝试5：反转图像裁剪

问题：依赖于附加颜色的其他图像。类似于尝试2 - 非常接近

body { background: red; }
div { position: relative; display: inline-block; }
img { max-width: 100%; vertical-align: top; }
.mask { position: absolute; bottom: 0; left: 0; right: 0; width: 100% }

<div>
  <img src="http://placehold.it/640x320" width="320" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/640x320" width="480" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/300x300" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

<br /><br />

<div>
  <img src="http://placehold.it/1200x300" />
  <img class="mask" src="http://s15.postimg.org/c37ncbvxn/curve_mask.png" />
</div>

Answer 1

尝试6：透明：在使用巨型边框+溢出之前

问题：具有固定的大小，但只要大于网站宽度/图像高度就可以工作！虽然感觉很脏......

注意：虽然曲线看起来不相同，但它们都是具有相同曲率/角度的精确块。

＆＃13;

＆＃13;

div { position: relative; display: inline-block; overflow: hidden; }
img { max-width: 100%; vertical-align: top; }

div:before { 
  content: ""; 
  position: absolute; 
  bottom: -100px; 
  left: 50%; 
  margin-left: -900px;
  height: 1000px;
  width: 1600px;
  border-radius: 100%; 
  border: 100px solid #fff;
}

＆＃13;

<div><img src="http://placehold.it/320x120" /></div>
<div><img src="http://placehold.it/480x240" /></div>
<div><img src="http://placehold.it/100x220" /></div>

＆＃13;

＆＃13;

＆＃13;

帽子提示：http://jonmifsud.com/blog/inverse-border-radius-in-css/