Générateur de Triangle CSS

Choisissez une direction, une taille et une couleur pour construire un triangle en CSS pur, puis copiez le code. Cette technique utilise le classique div de largeur et hauteur nulles avec des bordures transparentes — pas de fichier image, pas de SVG, pas de clip-path — juste quelques déclarations border que tout navigateur comprend.

En quoi consiste cet outil ?

CSS n'a pas de forme de triangle dédiée, donc les triangles sont construits avec une astuce bien connue : prenez un élément de largeur et hauteur nulles, donnez-lui une bordure pleine d'un côté et des bordures transparentes sur les deux côtés adjacents. Comme les bordures adjacentes se rencontrent à un angle de 45 degrés, les bordures transparentes se resserrent jusqu'à un point, ne laissant visible que la bordure colorée, sous forme de triangle.

Cet outil construit cette structure pour vous : choisissez la direction que le triangle doit pointer, sa taille et sa couleur, puis observez l'aperçu en direct se mettre à jour et copiez le CSS exact. C'est la même astuce utilisée partout sur le web pour les flèches en CSS pur, les pointeurs de bulles d'aide et les chevrons de menus déroulants.

Source : CSS Backgrounds and Borders Module Level 3, W3C — définit comment les bords de bordure adjacents se rencontrent en angle, ce qui est le mécanisme sur lequel repose cette technique de triangle.

Pourquoi l'utiliser ?

L'aperçu en direct affiche le triangle réel afin que vous puissiez confirmer taille, direction et couleur avant de copier quoi que ce soit.
Couvre les quatre directions de base — haut, bas, gauche, droite — avec un seul contrôle.
Aucun fichier image ni SVG nécessaire — un triangle construit ainsi ne représente que quelques lignes de CSS.
Utile pour les pointeurs de bulles d'aide, les chevrons de menus déroulants/accordéons, les puces personnalisées et les formes décoratives simples.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Choisissez une direction — le triangle pointe vers le haut, le bas, la gauche ou la droite selon le côté qui reçoit la bordure pleine.
Définissez la taille — cela contrôle la valeur border-width sur les trois côtés et détermine la taille apparente du triangle.
Choisissez une couleur pour la bordure visible (pleine), qui devient la couleur de remplissage du triangle.
Copiez le CSS généré et appliquez-le à un élément avec width: 0 et height: 0 — un <div> vide ou un pseudo-élément comme ::before/::after fonctionnent bien tous les deux.

Exemple

Entrée

Direction : bas · Taille : 60px · Couleur : #ea580c

Résultat

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Pour un triangle pointant vers le bas, la couleur pleine va sur border-top tandis que les bordures gauche et droite restent transparentes — le côté opposé à la direction vers laquelle pointe le triangle.

Pourquoi la largeur et la hauteur nulles sont importantes

L'astuce ne fonctionne que parce que l'élément n'a pas de boîte de contenu propre — width: 0 et height: 0 signifient que toute la forme visible provient uniquement des bordures qui se rejoignent au point central. Si l'élément a une largeur ou une hauteur, les bordures ne se resserrent plus jusqu'à un point net et la forme se casse. C'est aussi pourquoi la technique fonctionne aussi bien sur un <div> vide que sur un pseudo-élément ::before/::after avec content: "" — aucun contenu réel n'est nécessaire, juste la boîte de bordure.

La documentation MDN sur la propriété CSS border explique comment border-width, border-style et border-color se combinent, y compris comment les bordures de côtés adjacents se rejoignent en diagonale (developer.mozilla.org/en-US/docs/Web/CSS/border) — le fait géométrique sur lequel toute cette technique est construite.

Usages courants des triangles CSS

Pointeurs de bulles d'aide et de discours : un petit triangle (6–10px) positionné au bord d'une boîte arrondie, coloré pour correspondre au fond de la boîte.
Chevrons de menus déroulants et de select : un petit triangle vers le bas à côté d'un bouton ou d'un élément select pour indiquer qu'il ouvre un menu.
Indicateurs d'accordéon/d'expansion : un triangle pointant à droite qui pivote pour pointer vers le bas quand une section est développée.
Puces de liste personnalisées : un petit triangle pointant à droite à la place de la puce par défaut du navigateur, pour un style de liste plus distinctif.
Coins de bannière/ruban simples : un triangle glissé dans le coin d'une carte pour simuler un effet de ruban plié.

À associer avec d'autres outils CSS

Les triangles utilisés comme pointeurs de bulles d'aide ont généralement besoin d'une ombre assortie pour s'intégrer visuellement à la boîte à laquelle ils sont attachés — le Générateur de Box Shadow produit cette ombre. Pour des formes d'interface allant au-delà des triangles (chevrons, étoiles, hexagones), clip-path est généralement la meilleure approche moderne plutôt que d'empiler encore des astuces de bordures.

→ Générateur de Box Shadow · Générateur de Border Radius

Foire aux questions

Pourquoi la couleur se place-t-elle sur la bordure opposée à la direction que pointe le triangle ?

Imaginez l'élément comme un losange composé de quatre segments de bordure triangulaires se rejoignant au centre. Si la couleur pleine est sur la bordure supérieure, la forme visible occupe la moitié supérieure — mais comme l'élément a une taille nulle, ce triangle de 'moitié supérieure' pointe en réalité vers le bas, vers l'endroit où se serait trouvée la boîte de contenu inexistante de l'élément. La même logique s'applique aux quatre directions.

Puis-je créer un triangle qui ne soit pas parfaitement isocèle ?

Oui — cet outil génère toujours un triangle symétrique par souci de simplicité, mais vous pouvez modifier le CSS copié manuellement ensuite. Rendre les deux border-width transparentes inégales incline le triangle d'un côté ; changer indépendamment la largeur de la bordure pleine modifie sa hauteur sans affecter la largeur de sa base.

Cette technique fonctionne-t-elle dans tous les navigateurs ?

Oui — l'astuce du triangle basée sur les bordures ne repose que sur le support basique de border-width, border-style et border-color, qui existe depuis les toutes premières implémentations CSS. C'est l'une des techniques de formes en CSS pur les plus largement compatibles disponibles.

Quand devrais-je utiliser clip-path plutôt que l'astuce des bordures ?

L'astuce des bordures est idéale spécifiquement pour les triangles simples, car elle ne nécessite aucune propriété supplémentaire et fonctionne partout. Pour quelque chose de plus complexe — pentagones, étoiles, flèches avec une encoche, ou découpes diagonales sur une boîte qui doit encore afficher une image de fond — clip-path est plus flexible et plus facile à raisonner, bien qu'il ait un support plus restreint sur les anciens navigateurs.

Puis-je mettre du texte ou une icône à l'intérieur du triangle ?

Pas directement — comme l'élément du triangle a une largeur et une hauteur nulles, il n'y a pas de boîte de contenu pour accueillir quoi que ce soit. Pour combiner un triangle avec du texte ou une icône, utilisez-le comme pseudo-élément décoratif (::before/::after) sur un élément parent qui le positionne en absolu, puis stylisez le contenu réel du parent séparément.