CSS triangle and IMG

Question

I am trying to make the part of the triangle that you see above the image.

I try several methods without success.

I need a triangle, which should be the opposite if the size of the image changes. And I don't want the div container to expand due to the triangle. But I can not fix the height of the div, because it changes if the image size changes. I don’t want to make a triangle in Photoshop and export the image, because when you click on it, you will also see a triangle.

Any idea how to achieve this correctly.

Here is what I have 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

:after

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

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 **/
}

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

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 **/
}

Answer 2

.arrow-down {
  position:absolute;
  top:0;
  left:50%;
  width:0; 
  height:0; 
  border-left:20px solid transparent;
  border-right:20px solid transparent;   
  border-top:20px solid black;
}
.image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
img{
  width:100%;
}

<div class="image">
   <img src="http://lorempixel.com/400/200/">
   <div class="arrow-down"></div>
</div>

, .