Générateur CSS de triangles, gratuit

Le truc des bordures, un hack CSS de 25 ans qui marche encore

La technique du triangle CSS exploite la manière dont l'algorithme CSS de tracé des bordures gère les bordures adjacentes. Quand deux bordures se rejoignent à un coin, la frontière entre elles est tracée comme une ligne diagonale à l'angle qui bissecte le coin. Avec un élément de taille normale, le coin est petit et la diagonale à peine visible. Mais si vous mettez la largeur et la hauteur de l'élément à zéro et lui donnez des bordures épaisses, les coins occupent tout l'espace visuel, et ce qui était une diagonale invisible devient le bord visible d'un triangle. Rendez trois bordures sur quatre transparentes, gardez la quatrième colorée, et vous avez dessiné un triangle unique pointant à l'opposé du côté coloré. La technique a été largement documentée vers 2007–2008 dans les premiers articles de CSS-tricks par Chris Coyier et d'autres ; elle est depuis un incontournable de la boîte à outils du designer web parce qu'elle produit une forme nette, redimensionnable et coloriable en hex, sans SVG, sans PNG, sans requête HTTP supplémentaire, et sans CSS compliquée. Les maths sont simples mais contre-intuitives (la hauteur du triangle vaut la largeur de bordure du côté coloré ; sa base vaut deux fois la largeur de bordure du côté transparent adjacent). Ce générateur gère le calcul pour vous : déplacez des curseurs au lieu de calculer des largeurs de bordures.

Alternatives modernes, clip-path, SVG, conic-gradient

En 2026, le triangle par bordures a de la concurrence. CSS clip-path avec la fonction polygon() (CSS Masking Module Level 1, prise en charge baseline depuis 2017) vous laisse rogner n'importe quel élément à un polygone arbitraire : clip-path: polygon(50% 0, 100% 100%, 0 100%) dessine un triangle pointant vers le haut sur n'importe quel élément. clip-path est plus flexible (autant de sommets que voulu, pas seulement trois ; fonctionne sur tout élément ayant un contenu, pas seulement des div vides), se compose mieux avec les transformations et animations, et prend en charge les coins arrondis via la nouvelle fonction shape(). SVG inline (<svg><polygon points="50,0 100,100 0,100"/></svg>) vous donne le plus de contrôle, contours, remplissages, dégradés, animations via SMIL ou CSS, accessibilité via les éléments <title>. conic-gradient peut produire des formes triangulaires via des arrêts de couleur placés astucieusement, mais c'est plus une curiosité qu'un motif pratique. Le triangle par bordures reste le bon choix pour le cas décoratif simple (pointeurs d'info-bulles, chevrons de menus déroulants, queues de bulles de dialogue) où la simplicité et l'absence d'overhead comptent plus que la flexibilité ; clip-path est préférable quand le triangle fait partie d'une forme plus complexe, quand il faut y mettre du texte, ou quand le design peut demander des coins arrondis.

Où les triangles CSS prouvent leur utilité

• Pointeurs d'info-bulles et de pop-overs. Le petit triangle qui relie une bulle d'info-bulle à son élément d'ancrage est l'usage le plus courant, vous pouvez le construire comme un pseudo-élément triangle CSS (::before ou ::after) sur l'info-bulle, positionné au bord faisant face à l'ancre.
• Queues de bulles de dialogue. La queue pointue des bulles de chat, des cartes de commentaire et des citations en encadré. Même technique que les pointeurs d'info-bulles, en plus grand et stylé pour correspondre à la couleur de fond de la bulle.
• Indicateurs de chevrons de menus déroulants. Le petit triangle vers le bas dans les listes de sélection et boutons de menus déroulants. Les éléments <select> natifs ont des chevrons stylés par l'OS ; les menus personnalisés construits à partir de <button> + popover ont besoin du leur.
• Indicateurs d'accordéon ouvrir/fermer. Le triangle qui bascule entre pointant à droite (replié) et pointant vers le bas (déplié) quand vous cliquez sur une section d'accordéon. Animé par une transformation rotate CSS.
• Séparateurs de fil d'Ariane. Le triangle pointant à droite entre les liens du fil d'Ariane. Souvent construit comme un triangle CSS avec ::before.
• Décorations de bannières et rubans. L'encoche triangulaire au bout d'une bannière ou d'une étiquette de promo, le pli de coin sur un badge « nouveau », le chevron en bas d'une section hero pointant vers le bas pour faire défiler. Tous des triangles unicolores, tous par truc des bordures.
• Séparateurs décoratifs. Une rangée de petits triangles comme séparateurs de section, des superpositions de motifs géométriques, des fioritures rétro.

Considérations d'accessibilité

Les triangles CSS sont une décoration purement visuelle, ils n'ont aucun sens sémantique et aucune présence dans l'arbre d'accessibilité. Les lecteurs d'écran ne les annoncent pas. Pour un usage purement décoratif (la queue de bulle de dialogue, le séparateur de fil d'Ariane), c'est le comportement correct. Pour les triangles qui transmettent un sens (une flèche pointant vers la section active, un chevron de menu indiquant « cliquer pour en savoir plus »), le sens doit être communiqué par d'autres moyens : un attribut aria-expanded sur un déclencheur de menu, une étiquette de texte visible, un aria-label sur le bouton. Ne comptez pas sur un triangle CSS pour communiquer un état ; traitez-le comme un renforcement visuel d'un état communiqué sémantiquement par d'autres attributs. Le contenu des pseudo-éléments CSS ::before et ::after n'est généralement pas lu par les lecteurs d'écran, ce qui convient aux formes décoratives.

Types de triangles produits par ce générateur

• Haut / Bas: triangles isocèles pointant vers le haut ou vers le bas, la forme la plus courante pour les info-bulles et les indicateurs d'accordéons.
• Gauche / Droite: pointant à gauche ou à droite, utilisés pour les fils d'Ariane et les encadrés latéraux.
• Coins haut-gauche / haut-droite: triangles rectangles qui s'inscrivent dans le coin d'un élément contenant. Utilisés pour les effets de pli de ruban et de badges de coin.
• Coins bas-gauche / bas-droite: triangles rectangles pour les coins opposés.
• Aspect personnalisé: rapport largeur/hauteur ajustable pour des formes non équilatérales, utile quand on veut un pointeur étroit et haut ou un chevron large et plat.

Outils associés