html - 我可以只在底部画一个剪贴蒙版吗？

Question

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

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

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

这是一个视觉效果:

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

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

注意:虽然曲线看起来不相等，但它们都是具有相同曲率/Angular 精确 block 。

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/