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.

Answer 2

For rotation, you're looking for:

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

Keep in mind, that the rotation is a CSS3 attribute, so you're not going to get the same behavior across all browsers. Rather than making just the slant with an image, it would probably be better to recreate the whole outline. I'd approach it with:

1. The header section, which would have the slant, shadow, the menu background and the padding at the top of the content, pretty much like your screenshot there.
2. An image that can repeat-y down the entire body of content with a shadow.
3. The footer section.

You can also use external libraries to attempt to recreate CSS3 attributes, but images may be the easiest way as you know how they'll render.

Answer 3

I think you can use the techniques from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

This is a really nice compilation and inspiration for using CSS. Enjoy.

PS: it is safer than CSS3 transforms.

Answer 4

Rotation seems unnecessary. I would try using a CSS triangle effect.

I'm going to assume your links are in a ul so your css could select ul:before and make it into the correct shape.

I don't know what will happen with the box-shadow but it might be worth a shot, and will probably be easier to align in IE without resorting to JavaScript.