CSS3 Non rectangular backgrounds

October 20, 2012 5:45 pm 2 comments

Bored of rectangular backgrounds? You are right, squared divs are boring but you don’t like rounded corners anymore and need something special like this?

This is a nice div with a non rectangular background!

Then, you have reached the right place!

This nice effect is obtained using the new CSS 3D transform, so no every browser will render this example properly, you won’t see the example correctly if you don’t use:

  • Chrome 12+
  • Firefox 10+
  • Internet Explorer 10+
  • Safari 4+

Creating a background layer

The first thing to do is creating a background which can be rotable or transformable without change the proportions of the actual div. We can get it using the :before selector, this will be our HTML:

And our base css:

Using .nonrectangular:before we create a virtual empty div with the same width and height inside the actual div. Making it absolute positioned, and its parent relative, we force our browser to redraw the before layer and it will visible, placed in the top left of the .nonrectangular div. The negative z-index property set our background layer up!

Setting the shape of the background

There is no way of making a non-paralelogram polygon using just 2D transformations, to obtain that great effect we need to add some perspective to our background. Currently, only Firefox (version 16) uses css transformations without vendor prefixes, so it is needed to add several rules to get a crossbrowser result:

Different shapes can be obtained changing the values of the rotate3D property, so just play a little bit with them! The last rule is for IE9, which doesn’t support 3D transformations but 2D, so we can rotate the background in order to give some nice effect using IE9 too.

If you want to play a little with this background trick here you have a jsfiddle.

javi

Let’s push your website a bit further

My name is Javier Márquez and I have more than 10 years of web programming and web designing experience. If you have a difficult development to complete, maybe you can stop by and see what I can do for you. You can find me on and Twitter.

Leave a reply


contact meAnything related to web development like javascript and CSS to create responsive designs, or PHP and node.js to make your website work properly, is my pleasure. If you have an interesting project in mind, I can help to make it real.