javascript - 从图像中裁剪一个三 Angular 形并将其放在原始图像 CSS 下方

<分区>

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

enter image description here

我到现在为止是这样的 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);
}

我面临的问题是，我没有使用纯背景颜色，而是使用另一张图像作为背景，所以我不知道如何摆脱浅蓝色背景。

你能帮我实现第一张图的效果吗？谢谢!

最佳答案

我认为您不能在形状中添加一个三 Angular 形并将其用作那样的 mask 。您需要使用 SVG 形状和掩码或 CSS mask-image 属性(example - 请注意所有浏览器都不是 supported)。

关于javascript - 从图像中裁剪一个三 Angular 形并将其放在原始图像 CSS 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28154643/