html - Creating a transparent arrow above image in CSS3

Question

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.

Answer 1

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.

You could do something like this:

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

here is an illustrative 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 =)

---

Edit: and a more final result could then be something like this