Générateur de triangle CSS

Générez des triangles CSS grâce à l'astuce des bordures.

DirectionLargeur: 80pxHauteur: 60pxCouleur

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366f1;

Créez un triangle en pur CSS dans n'importe quelle direction, taille et couleur, et copiez le code des bordures.

Comment utiliser

Choisissez une direction et une taille.
Choisissez une couleur.
Copiez le CSS.

Questions fréquentes

Comment ça fonctionne ?: Cela utilise des bordures transparentes sur un élément de taille nulle, en ne colorant qu'un seul côté.
Puis-je l'utiliser pour des flèches ?: Oui, les triangles CSS sont courants pour les infobulles et les flèches de menu déroulant.

Outils associés