Comment dessiner un triangle en CSS pur sans SVG ?
L'astuce CSS classique utilisée depuis environ 2008 : un `<div>` aux dimensions nulles (width: 0, height: 0) avec une seule bordure colorée, le reste transparent, ressemble à un triangle. Le navigateur coupe les bordures en diagonale là où elles se rencontrent, donc une seule bordure colorée sur un élément de taille zéro forme un triangle.
C'est 0 ko, zéro dépendance, support GPU complet, parfait pour : les flèches dans les menus déroulants, les queues de tooltip, les séparateurs de fil d'Ariane. Pas besoin de SVG, de PNG ou d'icon font.
Vous choisissez ici une direction (8 variantes : 4 flèches + 4 diagonales), une taille et une couleur. Le CSS est prêt à copier.
Mode d'emploi
- Choisissez une direction en cliquant sur l'une des 8 icônes (haut/bas/gauche/droite + 4 coins).
- Le curseur taille (4-200 px) contrôle le triangle. Le triangle est deux fois plus large que haut pour les 4 directions cardinales.
- Couleur avec le sélecteur ou en saisissant un hex. Toute couleur CSS fonctionne (#hex, rgb, oklch, couleurs nommées).
- Copiez le CSS et collez-le dans votre feuille de style. Appliquez la classe `.triangle` à un `<div>` ou `<span>` vide.
- Astuce : pour des triangles non équilatéraux, modifiez width/height avec des valeurs différentes (par exemple bordure du bas plus grande = triangle plus haut).
Quand ça aide
Le triangle CSS est une primitive d'UI omniprésente. Les trois usages les plus courants :
- Flèche de menu déroulant (le petit chevron à côté d'un select). Indique que la liste peut être ouverte. Très léger, GPU rapide, fonctionne partout.
- Queue de tooltip / bulle de message. Le tooltip apparaît au-dessus d'un élément, un petit triangle dit « nous pointons cet élément ». Classique.
- Séparateur de fil d'Ariane (Accueil > Produits > Catégorie). Au lieu de « > » ou « / », un triangle CSS donne une séparation subtile et élégante.
- Flèches précédent/suivant d'un carrousel. Un triangle à la place d'une icône SVG = plus léger, GPU rapide.
- Indicateur de modale ou de popover. Le triangle sur le bord de la modale dit « ceci pointe l'élément X ».
- Décoration en ruban d'angle (4 variantes diagonales). Un triangle dans le coin d'une carte = ambiance retro-tech ou bandeau « NEW ! ».
Pour ajouter une ombre sous un triangle (ça fonctionne !), utilisez `filter: drop-shadow()` (`box-shadow` ne fonctionne pas, il n'y a pas de vraie boîte). Pour les animations, le triangle se transforme comme tout élément. Pour des formes plus complexes, voir le générateur clip-path.