On Friday I set a "challenge" to come up with the following navigation bar using CSS.

I think I might have over-sold what I'm about to describe as being some amazingly-clever trick using the latest in CSS3 techniques. That it ain't. All I've done is use some lateral thinking.

You can see a working example of the menu here.

In the example notice how the items "blend" in to each other when you hover over the menu items next to the already selected item. This was the challenge and where the trickery came in.

Basically it uses negative margins (e.g: margin-left: -16px) to make the neighbouring menu items overlap each other by half the width of the slanted area. Because the grey area of the images used to make the slant is in fact transparent you can still see one through the other.

Not rocket science but (I thought) a nice example of how you can normally achieve whatever you need to with CSS by using some lateral thinking and a trick or two.