Le Full-CSS se développe de plus en plus et consiste à remplacer le plus grand nombre possible d’images (idéalement la totalité) de votre site par du simple CSS. L’avantage certain est le temps de chargement plus rapide, mais en contrepartie, il faudra user de certaines astuces pour dessiner certaines parties… Nous allons voir ici comment créer des triangles en CSS !

Pour bien comprendre comment ça marche, regardons un exemple simple où on peut observer le fonctionnement des bordures. Oui oui, des bordures. Prenons un div sans aucun contenu, avec 4 bordures de couleurs différentes, des bordures solides et très épaisses, ce qui nous permettra de bien voir ce qu’il faut voir.

#exemple {
	width: 100px;
	height: 100px;
	border-style: solid;
	border-width: 50px;
	border-color: #0096FF #009600 #960000 #C2C231;
}

On obtient ceci :

Des trapèzes ! Et que se passe-t-il si on réduit la longueur de la petite base à 0 ? On obtient des triangles, puisqu’on a fait disparaître un côté ! Et pour ça, il suffit de donner une largeur et une hauteur nulle à notre div. C’est possible et on le verra toujours puisqu’on a nos bordures…

#triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px;
	border-color: #0096FF #009600 #960000 #C2C231;
}

Bon, mais là on a 4 triangles et nous, on n’en voulait qu’un seul. La solution est simple : on fait disparaître ceux dont on veut se débarrasser. Pour ça, il faut savoir que CSS met une couleur un peu spéciale à notre disposition : transparent. Inutile de préciser son effet, vous aurez compris. Imaginons que je veuille conserver le triangle du haut (le bleu, qui est dirigé vers le bas) :

#triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px;
	border-color: #0096FF transparent transparent transparent;
}

Et le tour est joué ! Alors maintenant, tout est question de détails. Les autres triangles sont toujours là, ils sont juste invisibles, mais là où dans notre exemple les triangles de gauche et de droite sont nécessaires (pour la forme de notre triangle visible), celui du bas est totalement inutile et ne sert qu’à donner une marge en plus. On peut évidemment le faire disparaître :

#triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 50px;
	border-color: #0096FF transparent transparent transparent;
}

Comme vous le voyez, notre triangle n’a pas été affecté et pourtant, c’est beaucoup mieux : plus de marge inutile (et si vous en voulez une, les margin sont là pour ça !). Mais du coup… Que se passe-t-il si on redessine les triangles sur le côté ?

#triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 50px;
	border-color: #0096FF #009600 transparent #C2C231;
}

On a la moitié de ce qu’on avait plus haut, et c’est tout à fait logique vu que nos triangles sont dessinés grâce aux bordures et que la bordure du bas a une épaisseur de 0 pixel… On finira donc sur cette remarque : on peut modifier l’apparence de nos triangles comme on le souhaite en jouant sur l’épaisseur des différentes bordures. Pour les calculs, ils ne sont guère compliqué et avec quelques petites formules de collège, vous pourrez dessiner des triangles isocèles, équilatéraux ou même tout à fait quelconques !

Play