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:

<div class="box">
	<div class="inner">
		<div class="content"><img src="img.jpg" alt="my bike" /></div>
	</div>
</div>

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.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (6 Comments)

1. kpjothi
   December 28, 2010

   nice tutorial :) thanks to sharing !

2. Red
   December 28, 2010

   Nice technique Alen, thanks for sharing!

3. Webstandardblog
   December 28, 2010

   Nice tutorial Alen, but you should offer the property transform:rotate(-20deg) without an prefix (-moz-, ...) too. Because there will be browsers in future which don't need (or understand) that prefix anymore. Greetings from Berlin!

4. Kanyakumari Tour booking
   January 3, 2011

   Hi, Thank you for sharing.........

5. Bhagwati
   January 3, 2011

   Thanks for sahring info with us, it's really great article

6. Michiel
   January 16, 2011

   Great idea :) and the explanation is really clear as well! I really think there's a lot we can do with the transform property. We've already seen the 3D ribbons at PVMGarage and this one. My idea was to make 3D-looking boxes of content. Check it out at http://bit.ly/3DBox

Sorry, the comment form is closed at this time.