Runde Ecken sind in aller Munde und mittlerweile gibt es auch etliche Anleitungen und Möglichkeiten diese zu realisieren. Ich war nun aber auf der Suche ein horizontales Menü zu basteln, dass einfach nur gewinkelte Ecken/Ränder hat:

Das Ganze sieht auf den ersten Blick nicht so kompliziert aus, aber auf den zweiten Blick ergeben sich doch ein paar Probleme, denn die einzelnen Menüpunkte sollten Hovern können und eine Active-State haben. Wie also vorgehen?

Warum Problem?
Nun ja CSS ist ein BoxenModell in denen die Boxen jeweils 90° haben. Eine Darstellung in dieser Form ist nicht ohne Weiteres möglich. Man könnte nun sagen, dass wir Bilder ziwschen die Einzelnen Elemente setzen und so den Eindruck der Winkel erstellen, dargestellt wie folgt:

Doch wie man ganz rechts sieht würde es sehr viele Bildchen geben, um jeden Fall abzudecken.
Ich habe das ganze also anders lösen müssen.
So kam es dazu, dass ich gif's benutzte. Der Vorteil: Gifs werden auch vom IE richtig in ihrer Transparenz dargsetellt.
Das heißt ich habe jeden Menüpunkt genommen und ihn so wie er ist ausgeschnitten:

Links und rechts habe ich mit Photoshop "weiß" als Tranpsarente Farbe eingerichtet, sodass ich nur noch ein margin-right:-20px als unschöne Eigenschaft benutzen musste und es war getan.

Wie schon gesagt, "schön" ist diese Lösung nicht aber sie funktioniert in allen Browsern ab Version 6, sodass man mit einer unschönen CSS-Eigenschaft leben kann.