Triangles CSS purs en 2026 — Quand l'astuce des bordures gagne encore (et quand non)

J'ai une blague récurrente selon laquelle on peut dater la carrière d'un développeur frontend par ce qu'il utilise quand il doit dessiner un triangle. S'il va directement vers un élément <svg>, il a probablement appris CSS après 2018. S'il utilise clip-path: polygon(...), il est arrivé vers 2015-2018. S'il utilise instinctivement un <div> avec d'étranges déclarations de bordure, il fait ça depuis longtemps.

La version "déclarations de bordures étranges" — l'astuce du triangle CSS par bordure — est la plus ancienne des trois et reste mon choix par défaut pour les petits éléments d'interface. Ce guide explique pourquoi ça fonctionne, quand c'est la bonne réponse, quand ça ne l'est pas, et comment utiliser le Générateur de Triangles CSS sur ToolBox Hubs pour éviter les calculs.

L'astuce, brièvement

Prenez un div avec une largeur et une hauteur de zéro. Donnez-lui des bordures. Les bordures n'ont nulle part où s'étendre, donc elles s'effondrent au centre, chaque bordure devenant un triangle qui rejoint les autres en diagonales à 45 degrés.

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

Vous obtenez un carré divisé en quatre triangles colorés se rejoignant au milieu. Maintenant, rendez trois de ces bordures transparentes :

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

Il vous reste un seul triangle rouge pointant vers le bas. C'est l'astuce. Elle est dans CSS depuis que la spécification a défini comment les bordures se rejoignent aux coins, ce qui signifie qu'elle a fonctionné dans tous les navigateurs jamais créés, y compris IE6.

Pourquoi cela bat encore SVG pour les flèches d'infobulles

En 2026, il y a trois façons raisonnables de dessiner un triangle dans une interface web :

1. L'astuce des bordures — width: 0; border: ...
2. clip-path — clip-path: polygon(...) sur un élément coloré
3. SVG — <svg><polygon points="..." /></svg>

Pour les petits éléments directionnels d'interface (carets de menus déroulants, flèches d'infobulles, séparateurs de fil d'Ariane, chevrons d'accordéon), l'astuce des bordures est généralement la meilleure parce que :

Pas de nœuds DOM supplémentaires. C'est juste un div ou pseudo-élément stylisé. SVG ajoute un nœud séparé à l'arbre de rendu, plus son élément <polygon> interne. Pour une infobulle avec flèche, c'est 1 nœud supplémentaire contre 2-3.

Hérite de currentColor par défaut avec un petit ajustement. Définissez la couleur de la bordure à currentColor et le triangle adopte la couleur de texte du parent. Utile pour la transition entre mode sombre/clair sans réécrire les règles CSS.

Aucune préoccupation de namespace SVG. Vous n'avez pas besoin de xmlns, vous n'avez pas à penser à viewBox, vous n'avez pas à vous soucier de savoir si le SVG est inline ou référencé par sprite.

Rend net à tous les niveaux de zoom. L'astuce des bordures utilise le rendu sous-pixel du moteur CSS du navigateur, qui est le chemin de rendu le plus agressivement optimisé. SVG peut parfois montrer des artefacts d'anticrénelage à des échelles de 1px, surtout dans les anciens navigateurs.

Pour les triangles qui SONT des boutons ou ont des effets de survol, le support du style et des transitions est identique à n'importe quel autre élément — :hover { border-bottom-color: blue } fonctionne simplement.

Quand vous devriez plutôt vous tourner vers clip-path ou SVG

En étant honnête sur les limites :

Tout ce qui n'est pas un triangle de base. Étoiles, pentagones, flèches aux formes complexes, tout ce qui a des courbes. L'astuce des bordures est limitée aux triangles par nécessité mathématique. Tournez-vous vers clip-path avec polygon() ou SVG.

Triangles qui doivent évoluer avec le texte. L'astuce des bordures utilise des valeurs en pixels. Si vous voulez un triangle qui évolue avec la taille de police de l'élément parent, vous pouvez utiliser des unités em ou rem comme largeurs de bordure — mais c'est maladroit. SVG avec viewBox gère la mise à l'échelle plus naturellement.

Triangles avec coins arrondis. Aucun moyen d'arrondir les coins avec l'astuce des bordures. Path SVG avec stroke-linejoin="round" ou clip-path avec border-radius séparé est le chemin à suivre.

Triangles qui ont besoin d'un trait (contour) différent du remplissage. Les bordures ne peuvent pas avoir leur propre bordure. SVG a fill et stroke comme propriétés séparées — parfait pour les flèches contournées.

Triangles qui changent de forme (animent entre formes). SVG peut transformer en douceur entre des paths. clip-path peut interpoler entre les points de polygone. Les triangles basés sur les bordures ne peuvent pas changer de forme — seulement la taille et la couleur.

Pour 80% des triangles d'interface, aucune de ces conditions ne s'applique. Les cas simples restent simples.

Les calculs (ou : Pourquoi vous voulez un générateur)

Le hic avec l'astuce des bordures : trouver les bonnes déclarations de bordure pour la direction que vous voulez est ennuyeux.

Pour un triangle pointant vers le haut :

• bordure du haut : 0
• bordure gauche : demi-largeur transparente
• bordure droite : demi-largeur transparente
• bordure du bas : pleine hauteur couleur unie

Pour un triangle pointant vers la gauche :

• bordure du haut : demi-hauteur transparente
• bordure droite : pleine largeur couleur unie
• bordure du bas : demi-hauteur transparente
• bordure gauche : 0

Pour un triangle de coin (triangle rectangle dans un coin) :

• deux bordures adjacentes couleur unie (l'une définit la taille)
• deux bordures opposées sont 0
• ...attendez, c'est faux, laissez-moi vérifier...

Vous voyez le problème. Chaque direction a son propre arrangement de quelles bordures sont colorées, lesquelles sont transparentes et lesquelles sont à zéro. Les calculs sont faisables mais suffisamment ennuyeux pour que je réécrive le même CSS de triangle trois fois avant qu'il soit correct.

C'est le point fort du Générateur de Triangles CSS. Choisissez une direction, définissez la largeur et la hauteur, choisissez une couleur, copiez le CSS. Le générateur fait l'arithmétique des bordures pour que vous n'ayez pas à le faire.

Huit directions qui couvrent la plupart des cas d'usage

Les quatre directions cardinales (haut, bas, gauche, droite) produisent des triangles isocèles centrés sur l'élément. C'est ce que vous voulez pour les indicateurs centrés : flèches déroulantes sous un bouton, pointeurs d'infobulles, chevrons développer/réduire.

Les quatre directions de coin (haut-gauche, haut-droite, bas-gauche, bas-droite) produisent des triangles rectangles ancrés à un coin. C'est ce que vous voulez pour les rubans de coin, effets de papier plié, accents de badge et séparateurs de fil d'Ariane style chevron.

/* Flèche pointant à droite (caret de menu déroulant) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* Ruban de coin (haut-droite) — triangle solide en coin supérieur droit */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

Le générateur couvre les huit dans une interface unifiée pour que vous n'ayez pas à vous souvenir quelle configuration de bordure produit quelle direction.

Patterns pratiques

Quelques snippets du monde réel qui montrent l'astuce des bordures en action.

Flèche d'infobulle

Une infobulle avec une flèche pointant vers l'élément déclencheur. La flèche est un pseudo-élément sur l'infobulle :

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

La couleur du border-top correspond au fond de l'infobulle, donc la flèche apparaît comme faisant partie de la même forme. C'est le cas d'usage canonique.

Chevron de fil d'Ariane

Le séparateur classique ">" entre les éléments du fil d'Ariane, mais comme flèche dessinée en CSS :

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

Vous pourriez utiliser un caractère Unicode ›, mais l'approche CSS vous donne un contrôle précis de la taille et correspond exactement aux couleurs de votre système de design.

Queue de bulle de dialogue

La queue d'une bulle de message de chat :

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

La forme de triangle de coin "bas-droite", ancrée en bas à gauche de la bulle, donne ce look classique de queue de bulle de dialogue sans SVG.

Erreurs courantes

Choses qui ont cassé des triangles pour moi :

Oublier width: 0; height: 0;. Sans ceux-ci, les bordures dessinent autour d'une boîte réelle au lieu de s'effondrer en un point. Vous obtenez un cadre au lieu d'un triangle.

Définir uniquement la border-color et oublier border-width. Une bordure avec une largeur de zéro ne se dessine pas, quelle que soit la couleur. Les quatre bordures ont besoin de largeurs explicites même si certaines sont à zéro.

Confondre border-top avec le sommet du triangle. Le triangle pointe À L'OPPOSÉ de la bordure colorée. Un border-bottom solide produit un triangle pointant vers le HAUT. Si vous voulez que le triangle pointe vers le BAS, utilisez un border-top solide. Cela trompe tout le monde au début.

Dimensionner le triangle avec width au lieu des largeurs de bordure. Définir width: 100px; height: 50px ne fait rien d'utile — l'élément doit toujours être de taille zéro pour l'astuce des bordures. La 'taille' du triangle est entièrement contrôlée par les largeurs de bordure.

Transitions au survol sur la couleur mais pas border-color. transition: background-color 200ms n'animera pas un triangle à bordure. Utilisez transition: border-color 200ms (ou transition: all) pour que le changement de couleur s'anime.

Une note sur currentColor

currentColor est un mot-clé CSS qui se résout à la valeur de la propriété color de l'élément. C'est incroyablement utile pour les triangles qui doivent correspondre à la couleur de texte du parent :

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* Ce triangle hérite de la couleur du bouton */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* Le triangle se met automatiquement à jour à la nouvelle couleur */
}

Ce pattern est ce qui rend les triangles à bordure compatibles avec les systèmes de thèmes et le mode sombre. Définissez la couleur une fois sur le parent, et chaque triangle l'hérite. Pas besoin de règles CSS séparées pour le mode sombre pour chaque direction de triangle.

Outils qui se complètent bien

Les triangles sont généralement une pièce d'un puzzle d'interface plus large. Ces outils apparaissent souvent dans le même flux de travail :

• Générateur de Clip Path CSS — pour des formes plus complexes que des triangles (étoiles, pentagones, flèches)
• Générateur de Gradients CSS — pour remplir les arrière-plans derrière vos triangles
• Générateur de Border Radius CSS — pour des formes arrondies qui complètent les triangles nets
• Sélecteur de Couleur — pour affiner la couleur exacte du triangle à partir d'une palette de marque

Le Générateur de Triangles CSS est gratuit, fonctionne entièrement dans votre navigateur, et produit du CSS propre que vous pouvez coller dans n'importe quelle feuille de style — pas de dépendances de framework, pas de prétraitement, pas d'étape de build requise. Choisissez une direction, faites glisser les sliders de taille, copiez le code.

Pourquoi je l'utilise encore en 2026

Les tendances frontend bougent vite. Les frameworks vont et viennent. CSS lui-même a ajouté les container queries, :has(), les styles en couches, les view transitions — fonctionnalités majeures qui changent comment nous écrivons des interfaces modernes.

Mais l'astuce des bordures reste la bonne réponse pour "j'ai besoin d'un petit triangle dans le cadre d'un élément d'interface." C'est petit, rapide, bien compris, et fonctionne partout. Le fait que ce soit ancien n'est pas un problème — c'est un signe qu'il a résolu son problème complètement la première fois. Certaines techniques n'ont pas besoin d'être remplacées.

Tournez-vous vers SVG quand vous avez besoin de flexibilité. Tournez-vous vers clip-path quand vous avez besoin de formes non triangulaires. Mais pour les triangles qui apparaissent dans les infobulles, les menus déroulants et les fils d'Ariane — les triangles d'interface les plus courants — l'astuce des bordures reste l'option la plus propre.