The new CSS3 transform property adds a host of options for, well, transforming, page elements. The latest revision even adds 3D transformations. I'll be starting easy by using the rotate method to create a "tabs" menu like this:

I have used graceful degradation for non supporting browsers, so the tabs should look like the following in Internet Explorer 9 and below.

Older versions of IE do support rotation of 90/180/270 degrees, but I will not be using this.

The HTML markup

The HTML markup is a simple block level container element with hyperlinks nested inside. I have used the HTML5 'nav' element, but if you prefer you can subsitute this for a 'div'

        <nav class="AngledTabs">

            <a href="#">Tab1</a>

            <a href="#">Tab2</a>

            <a href="#">Tab3</a>

        </nav>

Rotating the Tabs

The W3C defined transformation property (which includes translation, rotation, scaling and skewing) is still a working draft, and so cannot be reliably implemented by all browsers. Some of the leading browsers have already implemented their interpretation of the feature, and we can access these implementations using the vendor specific properties:

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

Webkit browsers include Chrome and Safari, and the mox prefix targets Mozilla firefox.

Positioning the Tabs

By default, the rotation origin is 50% 50%, or the centre of the element. To Make the maths simpler, we will choose to rotate about the bottom left corner of the tab. This will be the highest point we want visible on the tab, so moving the tabs down by the height of the container will leave this point resting on the bottom of the container.

        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        margin-top: 175px;

Leaving us with:

The tabs at this point are still spaced out horizontally by the width of the tab. We need to move them closer together by specifying a negative margin to one side. If we specify a negative left margin, this leaves the left most tab outside the container, so we need to bring it back inside by using the same left padding on the container. Finally, we need to hide the bottom of the tabs:

        
        padding-left: 80px;
        overflow: hidden;

Using selectors to target browsers

Adding the various margins and paddings above makes the tabs render horribly in browsers that don't support rotation. Therefore we need to make sure that they are only being applied in browsers with HTML5/CSS3 support. There are several methods of doing this, however I have opted for using the nth-of-type selector:

        body:nth-of-type(1) .AngledTabs { ... }
        body:nth-of-type(1) .AngledTabs a { ... }

Alternatively you could use targeted stylesheets (e.g. an IE only stylesheet which overrides the margins). I prefer the selectors method as it keeps everything together, avoids using the !important declaration to override properties and should distinguish between any HTML5/ non-HTML5 browser. The potential pitfall is that a browser could implement the nth-of-type selector before rotation. 

Styling

At this point it is up to you how you style your tabs to fit in with your website. The other properties I have set that you should be aware of and probably want to keep are:

        height: 45px;
        line-height: 45px; /* Keep line-height equal to height to keep the text centered vertically */
        padding-left: 30px; /* Keep the text from dissapearing beneath the overflow at the bottom of the tab)*/

Download the full code- Angled Tabs.zip (2.65 kb)