Médiaforma

Dessinez des triangles en CSS3

Print Friendly

Cette rubrique s’inspire de la précédente. Elle va vous montrer comment tracer des triangles 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 :

triangles css3

Voici le code utilisé :

triangles css3

Le code HTML définit quatre balises <div> d’identifiants tr-bas, tr-haut, tr-gauche et tr-droite.

Examinons le code CSS.

La largeur de la balise d’identifiant #tr-bas est fixée à 0. Ainsi, le <div> corespondant aura une largeur fixe, indépendante de la taille de la fenêtre du navigateur.

En affectant la valeur 100px à la propriété border-top et la valeur 50px aux propriétés border-left et border-right, la balise <div> a une dimension de 100 pixels sur 100 pixels, et la bordure supérieure est deux fois plus grande que la bordure gauche ou que la bordure droite.

Pour transformer ce carré en une flèche orientée vers le bas, il suffit d’utiliser une couleur transparente pour les bordures gauche et droite, en affectant la valeur transparent aux propriétés border-left et border-right :

triangles css3

Les bordures gauche et droite disparaissent et seul un triangle orienté vers le bas est affiché :

triangles css3

En utilisant une technique similaire, il est facile de définir des triangles orientés vers le haut, vers la gauche ou vers la droite :

triangles css3

Voici le résultat :

triangles css3

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

No comments yet.

Leave a Reply