我正在尝试在 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：剪辑路径
问题：曲线不一致、支持不稳定、不支持任何 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>尝试6：透明：之前带有巨型边框+溢出
问题：具有固定尺寸，但只要大于网站宽度/图像高度即可工作！虽然感觉很脏...
注意：虽然曲线看起来不相等，但它们都是具有相同曲率/角度的精确块。
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/