Navigation mit Parallelogrammen

[Peter]

Der Titel sagt eh schon fast alles. Ich (eig. ein Kunde, der das Design seiner alten Visitenkarte auf die Website umgelegt haben möchte) würde gerne eine Navigation à la:
    __________________
   /     /     /     /
  /     /     /     /
 /_____/_____/_____/

bauen (zu meinen "Zeichenkünsten" dürft ihr mir nachher gratulieren =D).

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
________
   /
  /
_/______

so in etwa, ist aber ziemlich kompliziert wenn ich Bilder ändern will, da ich ja dann immer 2 ändern muss und auch dementsprechend mehrere Varianten der Bilder brauche.

Hat jemand noch weitere Lösungsansätze zu dieser Problematik? (bzw Information bez. DOM-Lösung, Browser-Kompatiblität und MouseOver bei transparenten/sich überlagernden Bildabschnitten)

Wäre sehr dankbar für jeden hilfreichen Beitrag

PS.: Punkte dienen nur als Platzhalter ;)