Générateur de triangle CSS
Créez des triangles CSS avec un aperçu en direct. Choisissez la direction, la taille et la couleur, la méthode border ou clip-path, puis copiez le code.
Noter Générateur de triangle CSS
Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.
Fini les largeurs de bordure à deviner
Les triangles sont partout dans les interfaces : flèches de menus déroulants, pointes d’infobulles, coins de ruban et formes décoratives. Au lieu de calculer à la main des largeurs de bordure ou des points de clip-path, choisissez une direction et faites glisser quelques curseurs jusqu’à ce que l’aperçu soit parfait.
Pourquoi utiliser ce générateur ?
Deux méthodes éprouvées
Basculez entre l’astuce classique des bordures, qui fonctionne dans tous les navigateurs, et clip-path, qui prend en charge les dégradés et les animations de formes fluides.
Aperçu en direct instantané
Chaque modification de curseur ou de couleur met aussitôt le triangle à jour, pour que vous puissiez coller à une maquette ou repérer un problème avant de copier quoi que ce soit.
CSS propre et prêt à l’emploi
La sortie est une unique règle CSS correctement formatée, sans balisage supplémentaire, prête à être collée dans une feuille de style, un styled-component ou un module CSS.
Fonctionne sur tous les appareils
La mise en page et les commandes sont conçues pour le tactile et les petits écrans : vous pouvez affiner un triangle aussi facilement sur un téléphone que sur un ordinateur.
Comment fonctionne Générateur de triangle CSS
Deux techniques dominent la création de triangles en CSS, et elles résolvent des problèmes différents. L'astuce des bordures fixe la largeur et la hauteur d'un élément à zéro, puis s'appuie sur des bordures épaisses et dépareillées qui se rejoignent en angles vifs pour simuler un triangle. Elle fonctionne depuis Internet Explorer 6 et ne demande aucune prise en charge particulière du navigateur, mais ne produit qu'une forme plate d'une seule couleur. Clip-path adopte l'approche inverse : il découpe une fenêtre triangulaire dans une boîte normale, de sorte que la forme peut porter un dégradé, une image d'arrière-plan ou se transformer en douceur en un autre polygone. Ce générateur construit les deux versions à partir des mêmes commandes, ce qui vous permet de les comparer côte à côte.
Choisissez l'une des huit directions : les quatre points cardinaux pour des triangles symétriques, ou les quatre angles pour des formes à angle droit adaptées aux coins de ruban et aux effets de bord replié. Faites glisser les curseurs de largeur et de hauteur pour remodeler le triangle, et définissez une couleur avec le sélecteur ou en saisissant une valeur hex. L'aperçu se met à jour à chaque modification, rendu avec le CSS exact que l'outil vous fournit, et non une approximation.
Changez l'arrière-plan derrière l'aperçu pour vérifier le rendu de la forme sur des surfaces claires, grises ou sombres avant de valider une couleur. Une fois le résultat satisfaisant, copiez le bloc CSS sous l'aperçu : une règle avec l'astuce des bordures si vous avez choisi cette méthode, ou une déclaration width, height, background-color et clip-path si vous avez opté pour l'autre. Rien de ce que vous construisez ici n'est importé ni stocké ; le code reste dans votre navigateur jusqu'à ce que vous le copiiez.
Comment utiliser Générateur de triangle CSS
Choisir une direction et une méthode
Choisissez la direction vers laquelle le triangle doit pointer et indiquez si vous voulez l'astuce classique des bordures ou une forme clip-path.
Ajuster la taille et la couleur
Faites glisser les curseurs de largeur et de hauteur et définissez une couleur. L'aperçu se met à jour instantanément pour vous permettre de coller à votre design.
Copier le CSS
Copiez le code généré et collez-le directement dans votre feuille de style ou votre composant.
Exemple d'utilisation
Un triangle classique pointant vers le haut, réalisé avec l'astuce des bordures :
Questions fréquentes
Quelle est la différence entre l'astuce des bordures et clip-path pour les triangles CSS ?
Quelle méthode utiliser pour une infobulle ou une flèche de menu déroulant ?
Puis-je animer un triangle CSS ?
Pourquoi mon triangle ressemble-t-il à un carré ou à un rectangle ?
Comment obtenir un triangle équilatéral plutôt qu'un triangle rectangle ?
Puis-je ajouter un contour autour de la forme du triangle elle-même ?
L'astuce des bordures fonctionne-t-elle dans les anciens navigateurs ?
Puis-je faire pivoter le triangle pour qu'il pointe dans une direction non proposée ?
Pourquoi le triangle est-il flou quand je l'agrandis beaucoup ?
Cet outil enregistre-t-il ou importe-t-il les triangles que je crée ?
Outils associés
Formateur CSS
Formatez votre code CSS pour une meilleure lisibilité.
Embellisseur CSS
Embellissez et formatez votre code CSS pour une meilleure lisibilité et une structure plus claire.
Générateur de couleur aléatoire
Générez une couleur aléatoire.
Générateur de dégradé
Générez un dégradé à partir de deux couleurs.
Générateur de box-shadow CSS
Concevez des ombres CSS box-shadow personnalisées avec un aperçu en direct. Réglez le décalage, le flou, l'étendue et la couleur, empilez plusieurs couches et copiez le code.
Générateur de loader CSS
Créez des spinners de chargement CSS avec un aperçu en direct. Choisissez un style, réglez la taille, la couleur et la vitesse, puis copiez le CSS et le HTML prêts à l'emploi.
Commentaires
Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.
Générateur de triangle CSS est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.
