How to create fluid trapezoid image with css?

Question

I am working on a website on which we have use parallax effect. In that there are some images which are triangle shaped, like this

Answer 1

If you play a bit with pseudoelements and 2DTransforms (supported since Firefox 3.5) you can achieve this effect : http://jsfiddle.net/fcalderan/T5KPA/1/

I tried on Chrome and Firefox. For Opera and IE9 you need to add proprietary prefixes.

Markup is really essential:

and the css to obtain this effect:

img { display: block; }

.triangle { 
   position   : relative; 
   overflow   : hidden; 
   padding    : 0; margin: 0; 
   display    : inline-block; 
}

.triangle:after,
.triangle:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -50%;
   width      : 200%;
   height     : 40%;
   display    : block;
   background : #fff;   
}

.triangle:before {
    top: -24%;  
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.triangle:after {
    bottom: -24%;  
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
}

I coloured the rotated pseudoelements using white but, of course, you can change the color so it fits the real background color