Création de triangles uniquement en CSS

Le HTML comme le CSS ne nous permettent pas de faire des formes autre que le rectangle (je rappelle qu’un carré est un rectangle particulier). Seulement il est tout à fait possible de faire un triangle sans avoir besoin de créer une image à l’aide des bordures en CSS. La technique est simple : créer un bloc faisant 0 pixels de haut sur 0 pixels de large, et de jouer avec les bordures. On va devoir utiliser une bordure de couleur et des bordures transparentes, en utilisant la propriété CSS border-color :transparent; ! Comme la bordure en CSS est gérée par les navigateurs à l’extérieur du bloc et, lors d’une épaisseur importante, biaise les angles, nous allons pouvoir créer un triangle très simplement.

La technique est simple : la seule chose à retenir c’est que la bordure CSS pour la réalisation d’un triangle se fera toujours du coté opposé à la direction souhaitée. Du coup, si je souhaite faire un triangle pointant vers la droite, il faudra alors mettre une couleur de bordure à gauche. Idem pour les autres sens où l’on prendra toujours l’opposé.

Voici le code CSS à créer :

.flechedroite {
width : 0;
height : 0;
border-bottom : 5px solid transparent;
border-top : 5px solid transparent;
border-left : 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}

J’ai rajouté font-size et line-height à 0 afin d’éviter des incompatibilités sur différents navigateurs qui pourraient prendre en compte le fait qu’une div comporte un élément texte et fausse alors l’affichage de notre triangle CSS

Voyez, c’est tout simple !