Comment utiliser : Générateur triangle CSS
- Cliquez sur une direction : haut, bas, gauche, droite ou l'un des coins.
- Définissez la largeur, la hauteur et la couleur.
- Choisissez Bordures (compatible partout, idéal pour les flèches en
::before/::after) ou clip-path (plus lisible, accepte les dégradés). - Copiez le CSS sur un élément ou un pseudo-élément.
Deux façons de dessiner un triangle
L'astuce des bordures : un élément de largeur et hauteur nulles n'affiche que ses bordures, et chacune d'elles forme un triangle qui se rejoint au centre. En rendant trois de ces bordures transparentes et la quatrième colorée, vous obtenez une flèche, sans aucune image. Sa taille dépend de l'épaisseur des bordures.
clip-path : une boîte classique avec clip-path: polygon(50% 0, 100% 100%, 0 100%). Plus simple à lire et à dimensionner, et elle peut être remplie d'un dégradé ou d'une image.
Exemple de flèche d'infobulle
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Autres formes : Générateur clip-path, Générateur de rayon de bordure, Générateur de blob SVG.
Aussi recherché comme : triangle css, flèche css, flèche infobulle css, triangle bordure css, caret css, forme triangle css, flèche bulle css.
Outils complémentaires : Générateur triangle CSS
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Générateur de masque CSS — Faites disparaître en fondu les images et les sections au lieu de les couper net : estompez un bord, le haut et le bas, les quatre bords, une vignette radiale ou un spot, découpez l'élément en rayures, ou appliquez un masque en forme (étoile, cœur, hexagone, flèche…) aux bords doux et progressifs que clip-path ne sait pas faire.
- Générateur CSS Grid — Définissez les colonnes, lignes et espacements, puis tracez sur les cellules pour créer des zones comme header, sidebar et main.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Comment faire un triangle en CSS ?
Donnez à un élément width: 0 et height: 0, puis définissez ses bordures : pour une flèche vers le haut, bordures gauche et droite transparentes et bordure inférieure colorée. Ce générateur l'écrit pour n'importe quelle direction et taille.
Comment ajouter une flèche à une infobulle ?
Ajoutez un pseudo-élément ::after avec content: "", positionnez-le sur le bord de l'infobulle et appliquez-lui les bordures du triangle générées ici.
Triangle par bordures ou clip-path ?
Les bordures fonctionnent dans tous les navigateurs et sont la référence pour de petites flèches sur des pseudo-éléments ; clip-path est plus simple à dimensionner et accepte les dégradés.
Un triangle CSS peut-il avoir une bordure ou une ombre ?
Superposez deux triangles (un légèrement plus grand, dans la couleur de bordure), ou utilisez clip-path sur un wrapper avec filter: drop-shadow() pour obtenir une ombre.
Puis-je installer Générateur triangle CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur triangle CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.