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

我正在尝试创建一个效果,我在 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

原文地址：https://www.jb51.cc/html5/168486.html