html形状变透明,html5 – 在CSS3中创建图像上方的透明箭头

在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;

}

这是一个说明性的jsfiddle

我只是用一个平面橙色背景作为例子……但是你可以把它改成图像,你希望得到你想要的东西=)

编辑：然后更多的最终结果可能是像this