解决方法
在CSS3中绘制透明/倒三角形
您可以使用CSS3 triangle technic,并通过组合:before和:after伪对象来制作倒置形状,每个对象绘制三角形的一部分.
你可以这样做:
.image { position:relative; height:200px; width:340px; background:orange; } .image:before,.image:after { content:''; position:absolute; width:0; border-left:20px solid white; left:0; } .image:before { top:0; height:20px; border-bottom:16px solid transparent; } .image:after { top:36px; bottom:0; border-top:16px solid transparent; }
这是一个说明性的@L_403_2@
我只是用一个平面橙色背景作为例子……但是你可以把它改成图像,你希望得到你想要的东西=)
编辑:然后更多的最终结果可能是像this