Comment puis-je découper des formes de parallélogramme en HTML / CSS?
Je dois découper la conception de sites Web en HTML/CSS. Le menu de navigation principal ressemble à celui ci-dessous:
Je suis un développeur web débutant et je ne sais pas comment découper ce design en code compatible et multi-navigateurs. Comment ces éléments en forme de parallélogramme doivent être tranchés?
Il existe également des états de survol et sélectionnés, donc j'utiliserais probablement des sprites CSS, mais le problème principal pour moi est ce parallélogramme.
Si vous ne voulez pas jouer avec la transformation css.
Honnêtement, la meilleure chose à faire est d'utiliser des rectangles et de veiller à ce que les états de survol ne se croisent pas. Exemple: http://imm.io/J4D8
J'ai aussi trouvé ça si ça aide, http://doctype.com/rollover-done-css
Bien que n'étant pas pris en charge par les anciens navigateurs, vous pouvez consulter la propriété de transformation en CSS. http://davidwalsh.name/css-transform-rotate Ce serait plutôt délicat, cependant, je vous suggérerais d'utiliser des images d'arrière-plan et de positionner le texte au-dessus (et même éventuellement le texte en tant qu'image). ) pour obtenir l'effet indiqué dans l'URL que vous avez postée
Vous pouvez créer parallélogrammes avec propriétés CSS , bien qu'il semble que cela apparaisse comme un carré dans IE.
Vous pourrez également utiliser une bonne vieille image imagemap avec certaines balises area utilisant shape="poly" et les coordonnées des points. Je ne sais pas si cela fonctionne avec le renversement ou non.