Générateur de Triangles CSS

Créez des triangles CSS purs avec la technique du border hack. Choisissez la direction, la taille et la couleur avec aperçu et CSS prêt à copier.

CSS Triangle Generator

Create pure CSS triangles using the border hack.

Width100px

Height100px

Color

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #10b981 transparent;
}

Comment utiliser le Générateur de Triangles CSS

Choisissez la direction du triangle : haut, bas, gauche ou droite.
Ajustez les curseurs de largeur et hauteur pour dimensionner le triangle.
Choisissez une couleur avec le sélecteur de couleur.
Copiez le CSS généré et collez-le dans votre feuille de style.

À propos des Triangles CSS

Les triangles CSS sont créés avec une astuce : définir la largeur et la hauteur à zéro avec des bordures épaisses transparentes, puis colorer une bordure pour créer une forme triangulaire.

Cette technique est utilisée pour les flèches d'info-bulles, les indicateurs de menu déroulant et les éléments décoratifs — sans images ni SVGs.

Questions fréquentes

Comment fonctionne l'astuce du triangle CSS ? ▼

Avec largeur et hauteur à 0 et des bordures épaisses, les bordures forment quatre triangles. Trois bordures transparentes révèlent un triangle visible.

Puis-je créer différentes formes ? ▼

Ce générateur crée des triangles. Pour d'autres formes, utilisez border-radius ou clip-path.

Cela fonctionne-t-il dans tous les navigateurs ? ▼

Oui. La technique des bordures est l'une des plus anciennes et des mieux supportées en CSS.