Générateur de triangle et de flèche CSS

Comment ça marche

Saisissez la couleur du triangle dans le panneau de gauche — HEX, RGB et HSL fonctionnent, et le code se régénère à chaque changement. Choisissez une direction puis réglez la largeur et la hauteur : 24 pixels de large sur 16 de haut est un point de départ courant pour les flèches de menu déroulant et d'infobulle. L'outil écrit width: 0 et height: 0 et construit le triangle avec les épaisseurs de bordure ; vers le haut, la base de 24 pixels se répartit en 12 pixels sur les valeurs gauche et droite de border-width — avec une largeur impaire vous verrez des demi-valeurs comme 12.5px, que le navigateur dessine sans problème. Les directions de coin n'utilisent que deux bordures et remplissent ce coin de la boîte d'un triangle rectangle ; c'est ainsi que se font les découpes de ruban et de badge. Copiez le code dans votre propre sélecteur, ou téléchargez l'aperçu en PNG de 1200×800 pixels.

Cet outil est aussi connu sous le nom de faire un triangle en css, triangle css border, triangle vers le bas css.

Qu'est-ce que Astuce des bordures ?

L'astuce des bordures est la méthode classique pour dessiner un triangle en CSS sans fichier image. Une boîte de largeur et hauteur nulles reçoit des bordures épaisses ; comme les bordures se rejoignent aux coins selon des diagonales à 45 degrés, chacune prend la forme d'un triangle. On colore le côté voulu, on passe les côtés voisins en transparent, et seul ce triangle reste visible. La technique est très ancienne et fonctionne de la même façon dans pratiquement tous les navigateurs jamais publiés ; flèches de menus déroulants, pointes d'infobulles et rubans de coin en sont les usages les plus courants.

Qu'est-ce que clip-path ?

clip-path est la propriété CSS qui rogne la zone visible d'un élément selon un tracé géométrique donné ; écrire polygon(50% 0, 100% 100%, 0 100%) découpe l'élément en triangle. La différence avec l'astuce des bordures : l'élément rogné est une vraie boîte — elle peut contenir un dégradé, une image ou du texte, et la plupart des navigateurs en peignent les bords plus lissement. En contrepartie, le tracé s'écrit à la main et les navigateurs très anciens ignorent la propriété. En pratique : bordures pour les petites flèches, clip-path pour les grandes formes qui portent du contenu.

Quelle différence entre le triangle en bordures et le triangle clip-path ?

Le triangle en bordures est un tour de dessin : il n'y a au centre aucune zone réelle pour du contenu, le triangle n'est que de la peinture de bordure d'une seule couleur. Cela le limite aux aplats, mais il fonctionne dans tous les navigateurs et deux lignes de code suffisent — idéal pour les petites flèches et les découpes de coin. clip-path rogne au contraire une vraie boîte en triangle : dégradé, photo ou même texte peuvent y prendre place, et le bord en diagonale est plus lisse sur la plupart des écrans ; en échange, vous écrivez les coordonnées vous-même et, sur les navigateurs très anciens, la forme redevient un simple rectangle. Règle pratique : bordures pour flèches et marques de coin, clip-path pour les formes avec contenu ou au-delà de 100 pixels.

La boîte de taille zéro : le triangle est en réalité une bordure

Toute l'astuce repose sur une observation : sur une boîte aux bordures épaisses, deux bordures voisines se rejoignent au coin selon une diagonale à 45 degrés. Réduisez la largeur et la hauteur de la boîte à zéro et il ne reste que les bordures — chacune a désormais la forme d'un triangle. Colorez une bordure, passez ses voisines en transparent, et un seul triangle s'affiche. Ne supprimez pas les lignes width: 0 et height: 0 du code ; si la boîte reprend une taille, le triangle se déforme en trapèze.

Une limite connue mérite d'être dite : la diagonale vient du rendu des bordures par le navigateur et peut paraître légèrement crénelée sur certains écrans — plus le triangle est grand, plus cela se voit. Sur les petites flèches et découpes de coin, c'est invisible ; pour un triangle décoratif au-delà de 100 pixels, pensez à clip-path, qui dessine un bord plus lisse.

Quelle direction pour quelle tâche ?

Le sens d'un triangle se lit dans sa direction ; voici les associations courantes.

• Flèche sous une infobulle → vers le haut ou le bas, base de 12-16 pixels
• Indicateur de menu déroulant → vers le bas, 8-10 pixels : discret à côté du texte
• Suivant / retour, lecture → vers la droite ou la gauche, largeur et hauteur proches
• Ruban, badge, étiquette de coin → directions de coin : le triangle remplit le coin de la boîte
• Pointe de bulle de dialogue → un des coins bas, de la même couleur que le fond de la bulle

Questions fréquentes

Ce triangle est-il une image ? La page charge-t-elle un fichier ?

Aucun fichier n'entre en jeu ; le triangle est du pur CSS. Les bordures épaisses d'une boîte sans taille se rejoignent en diagonale aux coins ; en colorant un côté et en rendant ses voisins transparents, il ne reste qu'un triangle. Comme c'est du code, il reste net à toute densité d'écran et la couleur change en une ligne.

Comment fixer le triangle à une bulle de dialogue ou à une infobulle ?

La voie habituelle passe par le pseudo-élément ::after de la bulle : donnez position: relative à la bulle, position: absolute et content: '' au pseudo-élément, puis ajoutez les lignes de bordure produites par cet outil. Placez la flèche le long du bord avec des propriétés comme left et bottom — aucun élément supplémentaire n'entre dans le HTML.

Pourquoi le bord en diagonale paraît-il crénelé ?

La diagonale vient du dessin de la jonction des bordures, et le lissage varie d'un navigateur à l'autre ; sur les grands triangles, l'effet d'escalier peut devenir visible. Les petites flèches ne posent aucun problème. Pour un grand triangle décoratif, clip-path: polygon(...) donne un bord plus lisse.

Où va ma couleur dans le code ?

Dans la ligne border-color : le côté peint porte votre valeur et les trois autres côtés indiquent transparent. Contrairement à un générateur de border-radius, ici la couleur fait partie du code, car la bordure est le triangle ; pour changer la couleur plus tard, modifiez cette seule valeur.