Générateur de triangle CSS
Composez un triangle en CSS pur grâce à l'astuce classique des bordures transparentes, avec aperçu en direct et code prêt à copier.
Comment ça marche
L'astuce repose sur le fait qu'un élément sans largeur ni hauteur, avec des bordures épaisses, affiche des bordures qui se rejoignent en pointe. En rendant deux bordures transparentes et en colorant la troisième, on obtient un triangle pointant dans la direction voulue — pas besoin d'image ni de SVG pour une flèche de tooltip ou un curseur décoratif.
Pourquoi utiliser cette astuce plutôt qu'une image ?
Un triangle CSS pur ne nécessite aucune requête réseau, se redimensionne parfaitement et change de couleur instantanément via une variable CSS, contrairement à une image bitmap ou même un SVG externe.
Puis-je animer la couleur ou la taille du triangle ?
Oui, comme il s'agit de propriétés CSS standards (border-color, border-width), elles peuvent être transitionnées ou animées avec transition ou @keyframes comme n'importe quelle autre propriété CSS.
Traitement 100% local : le code est généré entièrement dans votre navigateur via WebAssembly.