For the life of me, I can't figure it out: How do you create a CSS slanted tab menu?

Something like this:

htt开发者_开发百科p://www.cssplay.co.uk/menus/slanty.html

But...

• The whole entire tab shape should be clickable, including all four corners. In the CSSPlay example, start your mouse at the top-right corner of "Longer Item Three" and move it straight down so that you end by hovering over the bottom-left corner of "Four". As you can see, the top-right corner of "Longer Item Three" doesn't change background color and isn't clickable while the bottom-left corner of "Four" is. The effect I'd want is that either corner should be active/clickable depending on which tab/shape you are hovering on. Each tab should be directly adjacent to each other with a grey 1px slanted divider line between each, no white space between

• As little bloat as possible, as semantic as possible. The CSSPlay example has a bunch of tags that aren't semantic.

• I would want to use a different color gradient image background for each tab, eg. first tab is red gradient, second is blue gradient.

• Needs to be CSS2 to support a greater range of browsers

Does anyone know how? Eternal gratitude and will be yours! Is what I'm asking for possible?

When approaching the limits of what's possible with CSS you will encounter lots of trade-offs, and you must chose the trade-offs that best suite your case.

Non rectangular links are only possible with:

• CSS Transforms - only possible on CSS3 capable browsers (IE9 Beta; Opera, Webkit and Firefox in their latest incarnations.

• Image maps - not great for SEO or code tidyness/extensibility.

• Lots of extra markup - well, you've seen Stu Nichols solution.

Here I've made a quick mock up of a particular solution that I think suits you best:

http://jsfiddle.net/prfez/

In this particular solution you can't have an image background behind the nav, as the "margins" are a single image sprite that masks the rectangular corners of a gradient.

You also can't apply a hover effect on the background, as the background is applied on the ul instead of the li's.

The advantage is that the html is exactly what you'd expect from a nav.

Please note that the ul gradient background should be replaced with an image background for it to work on IE. And I've only tested on Chrome.