UTILS.
100 % dans le navigateur

Générateur de triangle CSS

Générez un triangle en pur CSS dans n'importe quelle direction et copiez le CSS.

À propos de cet outil

Produisez un triangle en pur CSS grâce à l'astuce classique des bordures — choisissez une direction, une taille et une couleur, puis copiez la règle. L'aperçu se met à jour en direct et tout fonctionne dans votre navigateur.

Foire aux questions

Comment fonctionne l'astuce des bordures ?
Un élément de largeur et de hauteur nulles n'affiche que ses bordures ; en rendant trois bordures transparentes, il ne reste qu'une bordure colorée en forme de triangle.
Pourquoi la largeur et la hauteur sont-elles à 0 ?
Sans surface de boîte, les bordures se rejoignent au centre, de sorte que la seule bordure visible devient un triangle net plutôt qu'un bord épais.

Plus d'outils