CSS triangle over and IMG

Question

I'm trying to do the triangle part that you see over the top of this image:

I tried a few methods without success.

I need the triangle to be reponsive if the image changes size. And I don't want the container div to expand because of the triangle. But I can't fix the div height because it changes if the image size changes. I don't want to do the triangle in photoshop and export the image because when you click on it you will see the triangle too.

Any idea how to achieve this the right way?

Here is what I tried:

http://jsfiddle.net/37uufbg3/

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
}
.image{
    width:100%;
}

<div class="imageTriangle">
    <img src="image.jpg">
    <div class="arrow-down"></div>
</div>

Answer 1

use pseudo element :after for image

demo - http://jsfiddle.net/victor_007/dvv7bg76/

this example will not work on ie8

.image:after {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    transform:translatex(-50%); /** making it horizontally center **/
}

or for older browsers you can also use this

demo - http://jsfiddle.net/victor_007/dvv7bg76/1/

this will work on ie8

.image:after {
    content:'';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-20px; /** for older browsers **/
}