Triangle en CSS

On crée un carré à partir d'un div ou d'un span.

On distingue les bordures avec des couleurs différentes.

On élargit la bordure du carré.
(L'épaisseur de la bordure correspondra à la moitié de la longueur de l'hypothénuse).

On réduit les dimensions du carré à 0.

On choisit le triangle de notre choix avec les couleurs de bordures

On peut maintenant supprimer la bordure inutile...

On peut également personnaliser le triangle avec les dimensions des bordures.

Cliquez pour relancer l'animation