从图像裁剪三角形并将其放置在原始图像CSS下方

Question

我正在尝试使用HTML / CSS实现此效果：

到目前为止我拥有的是这个    http://jsfiddle.net/zxq91ok0/

.wrap {
position: relative;
overflow: hidden;
width: 100%;
height:250px;
margin: 0 auto;
background-color:#B2C2CC;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}

我面临的问题是，除了普通的背景颜色，我还有另一个图像作为背景，所以我无法弄清楚如何摆脱浅蓝色背景。

你能帮我完成第一张图片上显示的效果吗？ 谢谢！

Answer 1

我认为你不能在你的形状中添加一个三角形并将其用作这样的面具。您需要使用SVG形状和蒙版或CSS mask-image属性（example - 请注意所有浏览器都不是supported。