可以从< div>中剪切三角形如下图所示？
背景实际上不只是颜色,但在我的情况下是一个模糊的图片,所以我不能简单地覆盖绿色< div>与一个棕色三角形图像.有没有一些其他的CSS方式来实现这个效果？谢谢.
解决方法
它的幻觉是可能的：
http://jsfiddle.net/2hCrw/4/
测试：IE 9,10,Firefox,Chrome,PC和iPad上的Safari.
> :: before和::伪元素歪斜以提供三角形的一面.
>用于裁剪偏斜的伪元素的包装器.您可以通过使用外部容器作为包装来避免这种情况.
>元素仍然可以用边框,阴影等设计.
>下面的任何东西都会正常显示.
演示与边界和阴影：http://jsfiddle.net/2hCrw/8/
此演示还为iPad与Retina添加了一个调整,以防止元素和伪元素之间的间隙(由阴影渗色或子像素渲染行为引起).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
作为替代,您可以使用透明图像,并使用伪元素“扩展”上方的元素.我有answered a similar question关于一个元素的圆切,并显示支持选项到IE7(以及未来的选项在CSS中真正的剪切/屏蔽).
