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

Question

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

有什么办法可以实现这种效果吗？如果有任何帮助，请使用 LESS。

Answer 1

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

你可以使用 CSS3 triangle technic , 并通过组合 :before 和 :after 伪对象来制作倒置形状，每个伪对象绘制三 Angular 形的一部分。

你可以这样做:

.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