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

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