Générateur de triangle CSS : code en bordures et en clip-path | We.Inc
Choisissez une direction parmi huit, réglez la largeur, la hauteur et la couleur, et copiez un triangle CSS créé avec des bordures ou avec clip-path, plus la version Tailwind et un exemple de flèche d'infobulle.
Générateur de triangle CSS
Il existe deux façons propres de dessiner un triangle en CSS. L'astuce classique donne d'épaisses bordures à une boîte de taille nulle et rend toutes les bordures transparentes sauf une. La méthode moderne donne une taille et un fond à une boîte normale, puis la découpe avec clip-path: polygon() à l'aide de trois points. Ce générateur écrit les deux pour huit directions.
Méthode des bordures ou clip-path ?
Besoin
Méthode des bordures
Flèche pleine d'une seule couleur
Fonctionne partout
Fonctionne dans tous les navigateurs actuels
Remplissage en dégradé ou en image
Non, chaque bordure n'a qu'une couleur
Oui, il découpe n'importe quel fond
Contour seul
Superposer deux triangles
Pas directement : clip-path coupe aussi les bordures et les ombres
Taille définie par largeur et hauteur
Non, taille définie par l'épaisseur des bordures
Oui
Flèche d'infobulle sur ::before ou ::after
Le choix habituel
Convient aussi
Les flèches d'infobulles, de bulles de dialogue, de menus déroulants et les coins de rubans sont presque toujours de petits triangles CSS. Choisissez une direction, ajustez la taille, et l'aperçu montre les deux techniques côte à côte pour vérifier qu'elles correspondent avant de copier celle qui convient à votre composant.
Choisissez une direction : haut, bas, gauche, droite ou l'un des quatre triangles d'angle.
Réglez la largeur, la hauteur et la couleur. Le bouton équilatéral fixe la hauteur à la largeur multipliée par 0.866.
Comparez les deux aperçus, puis copiez la version en bordures, la version clip-path ou les classes Tailwind.
Dans la méthode des bordures, l'épaisseur de la bordure colorée devient la hauteur du triangle et les deux côtés transparents prennent chacun la moitié de la base.
Utilisez clip-path quand le triangle a besoin d'un dégradé, d'une image ou d'un changement de couleur au survol sur une boîte dimensionnée.
Pour les flèches d'infobulles, positionnez le triangle avec position: absolute sur un pseudo-élément, sans ajouter de markup.
Besoin de plus de trois points ? Le générateur de clip-path vous permet de déplacer chaque coin d'un polygone.
Questions fréquentes
Comment fonctionne l'astuce du triangle en bordures ?
Là où deux bordures se rencontrent, le navigateur dessine l'angle en diagonale. Avec width et height à 0, la boîte n'est plus que quatre coins de bordure qui se rejoignent au centre. Colorez l'un d'eux et rendez ses voisins transparents : vous voyez un seul triangle.
Comment créer un triangle équilatéral ?
La hauteur d'un triangle équilatéral est égale à sa base multipliée par la racine carrée de 3 divisée par 2, soit environ 0.866. Pour une base de 100 pixels, utilisez une hauteur d'environ 87 pixels.
Un triangle CSS peut-il avoir une bordure ou un contour ?
Pas tout seul. Une approche courante consiste à superposer deux triangles : un légèrement plus grand dans la couleur du contour à l'arrière, et la couleur de remplissage par-dessus, décalée de l'épaisseur du contour. Un SVG inline avec un stroke est plus simple quand vous avez besoin d'un contour net.
clip-path modifie-t-il la boîte de mise en page de l'élément ?
Non. L'élément conserve sa taille rectangulaire complète dans la mise en page : clip-path ne change que ce qui est peint. Le contenu hors du polygone, y compris les ombres et les bordures, est coupé.
Comment écrire un triangle clip-path en Tailwind ?
Utilisez une propriété arbitraire avec des underscores à la place des espaces, comme [clip-path:polygon(50%_0,100%_100%,0_100%)], avec des classes de taille et de couleur comme w-[40px] h-[30px] bg-[#4F98FB].
Choisir la méthode selon l'usage du triangle
Pour une petite flèche qui dépasse d'une infobulle ou d'un menu, la méthode des bordures reste le code le plus court, et elle se place facilement sur un pseudo-élément. Elle n'a qu'une couleur et sa taille vient de l'épaisseur des bordures, ce qui suffit pour une flèche.
Pour une forme décorative, un coin de hero ou tout ce qui a un dégradé, clip-path est plus simple à raisonner : vous définissez largeur et hauteur comme pour n'importe quelle boîte et décrivez les trois coins en pourcentages.
Triangles d'angle
Les triangles d'angle sont rectangles et remplissent la moitié d'un rectangle. Avec les bordures, vous colorez un côté et rendez transparent un côté adjacent, en laissant les deux autres à zéro. Ils sont pratiques pour les coins de papier pliés et les queues de rubans.
Flèche d'infobulle avec un pseudo-élément
Bulle avec une flèche vers le bas
L'élément ::after n'a pas de taille. Sa bordure supérieure forme la flèche et les bordures latérales sont transparentes.
Triangle en dégradé avec clip-path
Un triangle en bordures ne peut pas recevoir de dégradé. Une boîte découpée le peut, car clip-path coupe le fond que peint la boîte, quel qu'il soit.
Créateur de triangles
Choisissez une direction, réglez la taille et la couleur, et comparez le triangle en bordures avec le triangle clip-path avant de copier.