HTML STRUCTURE FOR REFERENCE:
<div id="container">
<span id="left">
<img src=""/>
</span>
<span id="middle">
<img src=""/>
</span>
<span id="right"></span>
</div>
I made this example for you with pure css.
Now let explain how I made it.
I take a container, set the dimension of that and the relative position.
#container{
width:600px;
background-color:orange;
height:300px;
overflow:hidden;
position:relative;
}
If you set the overflow:hidden all the element inside the container will be truncated and they can't expand outside of the parent.
After that I putted 3 span in the container, they are inline element so I can't set the width or height of it. For do that I set it to display:inline-block. Now I can give to the span a dimension.
The span are in a absolute position because I want that there can be a span over another.
For that after the absolute position use z-index.
The 3 span ids.
#left{
position:absolute;
left:-100px;
display:inline-block;
width:300px;
background-color:red;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:1;
overflow:hidden;
}
#left img{
-webkit-transform:skew(20deg,0deg);
}
#middle{
position:absolute;
left:200px;
display:inline-block;
width:200px;
background-color:green;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:3;
border-right:10px solid white;
border-left:10px solid white;
overflow:hidden;
}
#middle img{
-webkit-transform:skew(20deg,0deg);
margin-left:-50px;
}
#right{
position:absolute;
right:-100px;
display:inline-block;
width:400px;
background-color:gray;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:2;
overflow:hidden;
}
As you can see there are the skew transformation for the shape, and also the overflow:hidden because I don't want the img inside the span go outside the parent area.
When I put an img inside the skewed span, it take also the skew of the shape. So apply the #nameofskewedcontainer img{
-webkit-transform:skew(20deg,0deg);
} where the skew property are exactly the opposite that is applied to the span. With that I keep the img with the standard shape without skew. ( try to remove that in jsfiddle demo and see)
So I hope I was clear. For everything leave a comment!
