我可以只在底部省略剪贴蒙版吗？

Question

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

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

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

这是一个视觉效果：

尝试 1：边界半径/溢出隐藏/固定宽度

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

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：透明 :before with mega-border + overflow

问题：具有固定大小，但只要大于站点宽度/图像高度即可工作！虽然觉得脏...

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

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

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

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