Angled content mask with CSS

In this article I will show you how to do create angled CSS content "mask". The idea is pretty simple and it uses CSS transform property (rotation to be more precise). Of course this effect will be fully functional only in browsers currently supporting CSS rotation.
In last article I talked about my position on vendor prefixes. In this article I am using properties that currently contain vendor prefixes. Funny, isn't it? Although I would still prefer to have prefix-free properties, that is not stopping me (and it shouldn't stop you) from using the new properties goodness.
Let's get to the business. Look at the image bellow to see what I am trying to achieve.

Take a look at the demo or Download files

The idea, as mentioned, is quite simple. We have 3 nested elements. Top level acts as a container of a certain size that fits into design, i.e site header. Second element will be rotated X degrees (clockwise) and third element is rotated -X degrees (anti-clockwise) so it evens up horizontally. Take a look at the image bellow to get a better idea.

The markup looks like this:

The CSS goodness

Important thing here is to set overflow property to hidden on all 3 elements (ok you can skip that for the 3rd element). First element is not rotated and it has fixed width and height. Second element is rotated clockwise and third element is rotated anti-clockwise by the same degree amount. The placement of the elements should then be further adjusted by element's margins and of course you are free to style it as pleased (background images, borders etc.) On the demo page I am providing a bare-bone example you can then restyle as pleased.

/* angled box styles */

.box{
 width:700px;
 height:300px;
 background:#ccc; 
 overflow:hidden;
 margin:1em 0;
 }
.box .inner{
 -moz-transform:rotate(20deg);
 -webkit-transform:rotate(20deg);
 -o-transform:rotate(20deg);
 width:300px;
 height:450px;
 margin-top:-70px;
 margin-right:100px;
 overflow:hidden;
 background:#aaa;
 float:right;
 border:3px solid #fff;
 }
.box .inner .content{
 -moz-transform:rotate(-20deg);
 -webkit-transform:rotate(-20deg);
 -o-transform:rotate(-20deg);
 width:500px;
 height:320px;
 margin-top:60px;
 margin-left:-80px;
 overflow:hidden;
 background:#f1f1f1; 
 }

This trick is works best if applied to images (background images), but any content can be masked like this.
Also please note that it will take some tweaking the margins to get the best result. What you need to have in mind that the content should be nicely presented in browsers that don't support CSS rotation, just as in my example.