它的幻觉是可能的：
/2hCrw/4/
测试：IE 9,10,Firefox,Chrome,PC和iPad上的Safari.
> :: before和::伪元素歪斜以提供三角形的一面.
>用于裁剪偏斜的伪元素的包装器.您可以通过使用外部容器作为包装来避免这种情况.
>元素仍然可以用边框,阴影等设计.
>下面的任何东西都会正常显示.
此演示还为iPad与Retina添加了一个调整,以防止元素和伪元素之间的间隙(由阴影渗色或子像素渲染行为引起).
test
#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中真正的剪切/屏蔽).
