Générateur de triangles CSS Générer des triangles CSS en utilisant la technique de bordure avec contrôle de direction et de couleur.

La technique du triangle CSS exploite la façon dont les bordures se rencontrent aux coins des éléments. Lorsqu'un élément a une largeur et une hauteur nulles, les bordures forment des formes triangulaires où elles se rencontrent. En rendant trois bordures transparentes et une bordure colorée, un triangle pointant dans la direction opposée à la bordure colorée est créé. Par exemple, border-bottom: 50px solid bleu avec des bordures gauche et droite transparentes crée un triangle pointant vers le haut. La taille du triangle est contrôlée par les valeurs de largeur de bordure. Pour les triangles équilatéraux, toutes les largeurs de bordure doivent être égales. Pour les triangles isocèles, la bordure colorée peut avoir une largeur différente. Cette technique peut également créer des triangles rectangles en rendant transparente seulement une bordure adjacente. Les triangles CSS sont affichés de manière nette à n'importe quelle résolution et sont pris en charge dans tous les navigateurs.