Navigation mit Parallelogrammen

[Deus Figendi]

Es geht ohne JavaScript. Der Artikel beschreibt auch wie: Die Transformationsmatrix ermitteln und den Matrix-Filter verwenden.

Jep, hatte es dann gestern Abend noch gelesen :)

Das Problem daran ist, dass die Transformation auch auf den Text wirkt. Das will man wohl nicht.

Stimmt, das Problem hast du dann mit jedem transform, auch mit dem "normalen".
Das beste was mir dazu einfällt ist zurückbiegen also <li> nach rechts und <a> (im li-Element) nach links (vielleicht kann/sollte man die Liste auch als ganze transformieren).

Oder (zugegeben ist das uncool): Man positioniert die li-Elemente relative und packt dort jeweils zwei Geschwisterelemente rein, einmal das was mal ein Parallelogramm werden soll (div oder img oder was weiß ich) und das a-Element.
Das Parallelogramme positioniert man dann absolute und das a-Element wenn man möchte auch (muss man aber glaube ich nicht).
Dann sollten sie sich überlagern, das eine ist transformiert, das andere nicht. Allerdings muss man die width vorher wissen.

Oder man lebt mit dem kursiven Text :D