我正在尝试创建一个效果,我在
CSS3中的任何图像上方都有一个透明箭头.请参见下图.
有什么想法怎么做这个效果？如果有任何帮助,请使用LESS.
解决方法
在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