html - 在 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

我只是在示例中使用了平面橙色背景...但是您可以将其更改为图像，并且希望得到您想要的东西 =)

---

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

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;
}