从图像裁剪三角形，并将其放置在原始图像CSS下面 [英] Crop a triangle from image and place it below the original image CSS

问题描述

我想使用HTML / CSS实现这种效果：

I am trying to achieve this effect using 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);
}

我面对的问题是，一个背景，所以我不知道如何摆脱浅蓝色背景。

The problem I face is that instead of plain background color I have another image as a background so I can't figure out how to get rid of the light blue background.

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

Can you help me accomplish the effect shown on the first image? Thanks!

推荐答案

我想你不能在你的形状中添加一个三角形，那。您需要使用SVG形状和掩码或CSS mask-image 属性（ example - 当心不是支持所有浏览器）。

I think you can't add a triangle in your shape and use it as a mask like that. You need to use SVG shapes and masks or the CSS mask-image property (example - beware that's not supported by all browsers).

这篇关于从图像裁剪三角形，并将其放置在原始图像CSS下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！