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

Question

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

任何想法如何做到这一点？如果有任何帮助，请使用LESS。

Answer 1

在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

Answer 2

我认为你需要这样的东西：

.arrow {
    bottom: -25px; 
    left: 30px; 
    width: 40px;
    height: 40px;
    position: absolute;
    overflow: hidden;
}

.arrow:after {
    content: ' ';
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    position: absolute;
    top: -19px;
    left: 3px;
    background: #999;
    border: 5px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}