在CSS3中创建图像上方的透明箭头

Question

我正在尝试创建一个效果,我在CSS3中的任何图像上方都有一个透明箭头.请参见下图.

有什么想法怎么做这个效果？如果有任何帮助,请使用LESS.

Answer 1

在CSS3中绘制透明/倒三角形

您可以使用CSS3三角形技术,并通过组合: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

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

编辑:然后更多的最终结果可能是这样的