Creating a transparent arrow above image in CSS3 - html

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

Answer 2

I think you need something like this:
.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;
}