Découpage d'un menu en diagonale

j'ai un petit problème de découpage que j'aimerai soumettre a votre sagacité :
j'ai un menu en diagonale (des rectangles colorées, avec un dégradé dedans et l'intitulé du menu dessus), genre ça :
http://www.nij.fr/divers/testmenu.jpg
avec des rollover sur chaque options.

..et je n'arrive pas à découper ça. Pour l'instant j'en suis rendu a un image map pour les liens, et je cherche toujours le moyen le plus léger pour mettre en place le rollover sans javascript.

Donc, si quelqu'un a une solution a proposer, je suis preneur !

Merci

Je ne suis pas sûr que javascript ai avoir avec tout ça, mais bon...
Si c'est bien l'image que tu présentes, cad simples dégradés, et que tu sens l'âme d'un conquérant, css3 peux te sauver... Sinon galère...

ben le javascript me permettrait de mettre en place le rollover plus facilement que les css... ou en tout cas, je vois comment faire en JS ^_^
pour les découpage, la c'est évident que ça changera rien.

et non, le menu réel est plus complexe, c'est pas un simple dégradé. La c'était juste pour montrer un exemple en 2-2...

et wé, galère c'est le bon mot.

merci de ta réponse en tout cas

Bonjour,

De base, les blocs HTML on en rendu rectangulaire, leur donner un rendu trapezoidal, implique soit une rotation (possible en CSS3, non supporté par tous les navigateurs, pas sûr que ça fonctionne) ou une transformation (JS éventuellement).

Sans voir le menu réel, difficile de se prononcer plus, mais de base, j'aurais tendance à dire que JS et area map sont tes seules issues.

voui c'était aussi mon avis...
Mais bon, je voulais croire qu'une solution miracle pouvait peut-être exister
tant pis, map + js alors

merki pour la réponse

Pourquoi miracle ?

Il n'y a aucun problème a utiliser map et JS, tant que c'est bien codé.

miracle de pouvoir me contenter d'html/css