Softonic

Générateur de triangles CSS

Étape 1 / 2
Suivant

Le triangle CSS classique n’est pas un triangle du tout, c’est un élément de largeur nulle et de hauteur nulle avec trois bordures transparentes et une bordure colorée qui se rencontre en un point. Ce générateur produit cette déclaration pour vous dans quatre directions (haut, bas, gauche, droite), dimensionnée selon la valeur en pixels que vous choisissez et remplie avec la couleur que vous sélectionnez. Idéal pour les flèches d’info-bulles, les bulles de dialogue et les séparateurs de fil d’Ariane.

Comment construire un triangle de bordure

  1. 1

    Choisissez une direction

    Haut, bas, gauche ou droite. La direction détermine quelle bordure reçoit la couleur et lesquelles des trois restent transparentes.

  2. 2

    Définissez la taille

    La valeur de taille est utilisée pour toutes les largeurs de bordure. Un triangle de 60px sera large (ou haut, selon la direction) de 120px.

  3. 3

    Choisissez une couleur de remplissage

    Le sélecteur de couleur n'accepte que les valeurs hexadécimales (par exemple `#10b981`) ; les couleurs rgb, rgba ou nommées ne sont pas prises en charge. La couleur est appliquée uniquement à la bordure opposée.

  4. 4

    Copiez la règle CSS

    La sortie est un ensemble de règles complet `.triangle { ... }`, intégrez-le dans votre feuille de style et ajoutez `<div class="triangle"></div>` où nécessaire.

Pourquoi le truc de bordure fonctionne

Lorsqu’une boîte a width: 0 et height: 0, ses quatre bordures se rencontrent en un seul point central. Comme les bordures se rejoignent à 45 degrés, chaque bordure est déjà un triangle, trois d’entre elles sont simplement invisibles. Rendez une bordure colorée et vous voyez ce triangle.

Carte des directions

Direction Bordure visible Bordures transparentes
Haut border-bottom border-left, border-right, border-top
Bas border-top border-left, border-right, border-bottom
Gauche border-right border-top, border-bottom, border-left
Droite border-left border-top, border-bottom, border-right

Mathématiques de dimensionnement

Les trois bordures transparentes partagent la valeur de taille. La bordure visible utilise la même taille. Donc, un triangle avec size: 60 :

  • Largeur = 2 × 60 = 120px pour les triangles haut/bas
  • Hauteur = 2 × 60 = 120px pour les triangles gauche/droite

Si vous avez besoin d’un triangle asymétrique (base plus étroite, pointe plus haute), donnez aux bordures transparentes une taille et à la bordure visible une taille différente, par exemple border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; donne un triangle haut et étroit vers le haut.

Quand opter pour SVG à la place

  • Vous avez besoin de plusieurs points, pas trois, utilisez <polygon>.
  • Le triangle doit se redimensionner fluidement avec le parent, utilisez un viewBox et preserveAspectRatio.
  • Vous voulez un remplissage dégradé, un contour ou une pointe arrondie, les bordures CSS ne peuvent pas faire cela.

Questions fréquentes

Pas avec des bordures seules, les largeurs de bordure n’acceptent pas % ou vw de manière bien prise en charge. Si vous avez besoin d’un redimensionnement fluide, passez à un SVG <polygon> ou utilisez clip-path: polygon(...) sur un élément normal.

Vous ne pouvez pas arrondir le coin où les bordures se rencontrent. Utilisez un SVG avec un chemin tracé et stroke-linejoin: round, ou clip-path: polygon(...) combiné avec un léger filter: drop-shadow pour masquer le bord.

Oui, c’est le cas d’utilisation le plus courant. Positionnez le triangle absolument contre le bord de l’info-bulle et faites correspondre la couleur de remplissage à l’arrière-plan de l’info-bulle afin qu’il soit perçu comme une seule bulle.

Oui. La direction, la taille et la couleur que vous choisissez sont envoyées à notre serveur avec la requête de la page afin qu’il puisse générer le CSS. Dans le flux pas à pas, elles sont également transportées dans le lien de la page. Elles ne sont pas stockées.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues