在CSS3中的图像上方创建透明箭头 [英] Creating a transparent arrow above image in CSS3

问题描述

我试图创建一个效果，其中我有一个透明的箭头上面的CSS3中的任何图像。请参阅下图。

I'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image.

任何想法如何做到这一点？

Any ideas how to do this effect? Using LESS if that comes to any help.

推荐答案

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

，您可以使用 CSS3三角技术，并通过组合：before 和：之后的伪对象来绘制反转形状，每个绘制三角形的一部分。

To draw a transparent / inverted triangle in CSS3

you could use the CSS3 triangle technic, and make the inverted shape by combining the :before and :after pseudo objects, each to draw one part of the triangle.

您可以这样做：

.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

我刚刚使用平面橙色背景的例子...但你可以将其更改为图像，你希望得到你想要的东西=）

I just used a plane orange background for the example ... but you can change it to image, and you hopefully get what you wanted =)

编辑可能会像这

and a more final result could then be something like this

这篇关于在CSS3中的图像上方创建透明箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！