html - 45 Degree Angle + Box Shadow - Using nothing but CSS

Question

I need to recreate the following design using only CSS:

What you're seeing in the picture is the top of a website container - the "links" are part of the main menu.

As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image.

For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers.

I was thinking along the lines of a positioned and rotated div with a white background and a box shadow, but I haven't been able to build it yet.

Any ideas?

Answer 1

There is something called Sandpaper that can help you to transform your elements, even in IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

You can just plug it into your site and you're set.

Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."

To do this you'd use:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

And thanks to Josh and Robert for the Opera equivalent:

-o-transform: rotate(45deg);

Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.