Médiaforma

Un trapèze en CSS3

Print Friendly

Cette rubrique est la suite logique d la précédente. Elle va vous montrer comment tracer un trapèze en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

Voici le code utilisé :

Le code HTML définit une balise d’identifiant trapèze.

Le code CSS fixe la largeur de la balise <div> à 100 pixels et sa hauteur à 0 pixel. Si la hauteur n’avait pas été nulle, le tracé aurait eu une tout autre allure. Ici par exemple, nous fixons la hauteur à 100 pixels. Voici le résultat :

Cette zone correspond à la balise <div>, celle-ci à sa bordure inférieure et celles-ci à ses bordures gauche et droite. En fixant la hauteur à 0 pixel, le tracé donne un trapèze.

Il suffit maintenant d’affecter la valeur transparent aux bordures gauche et droite pour obtenir le résultat attendu.

Voici le code final :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply