Les triangles 


Avec ce que nous avons vu jusque là, nous sommes capables de dessiner des carrés ou des rectangles et même des cercles, des ovales et des ellipses. Aussi paradoxal que cela puisse paraître, rien n'est prévu en HTML ni en CSS pour faire un triangle. Il est vrai que ce n'est pas une forme courante mais on peut en avoir besoin pour un logo par exemple.

Tout ce qui va suivre n'est qu'un truc. ou une bidouille comme on voudra bien l'appeler. Le principe est simple. On utilise un conteneur vide, <div></div> par exemple et on joue avec les bordures. Le code ci-dessous va vous aider à comprendre.


Nous avons deux div l'un dans l'autre. Le premier, #fond1, n'est là que pour mettre de la couleur au centre (rose et blanc). Notre deuxième, triangle1, bien que simplissime est plus intéressant. Après avoir fixé la largeur et la hauteur à 0 pixels, on s'occupe de la bordure. C'est border-style: double; qui permet de voir la couleur de fond de #fond1. La bordure à une épaisseur de 100 pixels (x 2 ça nous donne un carré de 200 pixels de côté. Ensuite on donne une couleur différente à chaque côté de la bordure ce qui permet de voir la forme qu'elles ont. La propriété border-style: accepte une dizaine de paramètres mais, pour faire des triangles, c'est solid qui aura notre préférence.


Pas de bordure


La bordure n'apparait pas même si elle est déclarée


Une ligne de points dont le diamètre fait l'épaisseur de la bordure


Une ligne de tirets dont largeur la fait l'épaisseur de la bordure


Une ligne pleine


Deux lignes parallèles


Effet de relief


Effet de relief inverse de groove


Effet de relief


Effet de relief inverse de inset

Pour faire un triangle simple, il suffit de reprendre le modèle du haut et de ne garder qu'une bordure. Dans l'exemple qui suit, on garde la bordure du bas.

On va voir que si dessiner un triangle ne pose pas de problème majeur, il va tout de même falloir user de subterfuges pour puvoir l'utiliser facilement.


C'est le modèle de base et le plus simple. Il suffit de mettre "transparent" comme couleur des bordures des deux côtés dont on ne se sert pas pour ne conserver que notre triangle. On peut obtenir ainsi 4 triangles rectangles réguliers. Le principe des triangles est très simples. On prend un côté que l'on colore et on rend les deux bordures adjacentes transparentes.


Le triangle isocèle est dessiné suivant le même principe. On utilise un côté pour la hauteur (ici le côté du bas) et la largeur du triangle est donnée par la largeur des deux côtés adjacents.



Le triangle équilatéral est le plus régulier des triangles. Il obéit aux mêmes règles que les précédents mais, car il y a un mais, il oblige à sortir la calculette à moins d'être plus doué que moi en calcul mental. Pour obtenir la hauteur du triangle, on multiplie la moitié de la longueur d'un côté par 0.866 ou plus simplement on multiplie la longueur d'un côté par 1.73.



Dernier type de triangle, le triangle quelconque. C'est certainement le plus difficile à mettre en place à cause de ses formes qui ne sont pas régulières. Quoi qu'il en soit, il se dessine de la même façon que les autres. Une bordure colorée et les deux bordures adjacentes restent transparentes.




J'ai dessiné mon triangle et je lui ai donné une rotation de 25 degrés. Cette rotation fait sortir le triangle de son cadre ce qui fait que la partie gauche du triangle sort de la page. Pour pallier cela, je l'ai décalé de 35 pixels. De la même façon, j'ai du mettre deux sauts de ligne pour pouvoir placer mon code sous le triangle.

Les triangles sont dessinés à partir des bordures et, étant donné qu'une bordure n'est pas un conteneur, on ne peut rien mettre dedans. Tant pis, on va faire autrement.


Nous utilisons trois balises <div>, la première pour la flèche, la deuxième pour le texte et une troisième pour contenir le tout. Pour la flèche, nous utilisons la bordure gauche et nous la positionnons à 85 pixels alors que la largeur de #texte est de 100 pixels. Ceci est fait afin que le mot "sortie" déborde sur le triangle. Dans le style de #texte, j'utilise la propriété z-index afin de forcer le texte à être sur le dessus. Plus la valeur est élevée et plus haut sera l'objet auquel elle est appliquée.


Nous allons finir avec un autre petit truc. Par définition, une bordure ne peut pas avoir de bordure. Pour simuler cela, nous allons tout simplement juxtaposer deux triangles. On déclare le plus grand, celui qui servira de bordure, puis on place dessus notre triangle.

Pour les autres formes qui nécessitent la présence d'un ou de plusieurs triangles, les méthodes ne manquent pas. Par exemple on peut faire une étoile avec deux triangles équilatéraux inversés et placés l'un sur l'autre. On peut faire toutes sortes de parallélipipèdes avec des fonctions transform: etc.