Dessiner un triangle en CSS grâce à la propriété border

Besoin d’ajouter une flèche, une infobulle ou un élément graphique sans utiliser d’image ? Il est possible de créer un triangle en CSS avec seulement quelques lignes de code grâce à la propriété border. Une technique simple, légère et encore très utilisée dans les interfaces web modernes.

Dans ce tutoriel front-end, vous allez comprendre comment fonctionne cette astuce, pourquoi elle marche et comment réaliser facilement un triangle CSS orienté dans n’importe quelle direction. Même si vous débutez en CSS, vous pourrez reproduire les exemples pas à pas et les intégrer rapidement dans vos propres projets.

• Créer des triangles en CSS sans image, SVG ou bibliothèque.
• Comprendre comment une simple bordure peut générer une forme géométrique.
• Réutilisrz facilement cette technique dans vos menus, infobulles, flèches et éléments d’interface.

Créer un triangle en CSS fait partie de ces petites astuces qui surprennent souvent les débutants. Après tout, le CSS propose des propriétés pour gérer les couleurs, les marges ou les bordures, mais il n’existe aucune propriété nommée « triangle ». Pourtant, grâce à une utilisation astucieuse de la propriété border, il est possible de dessiner des triangles de toutes tailles et dans toutes les directions.

Cette technique est largement utilisée dans les interfaces modernes. Vous l’avez probablement déjà vue sans le savoir : les petites flèches des menus déroulants, les bulles de discussion, certains infobulles ou encore des éléments décoratifs reposent souvent sur ce principe.

Pourquoi utiliser un triangle en CSS ?

Lorsque l’on souhaite afficher une forme géométrique simple sur une page web, plusieurs solutions existent. Vous pourriez utiliser une image, un SVG ou même dessiner une forme avec du JavaScript.

Mais, pour un simple triangle, ces solutions sont souvent excessives.

Le CSS offre plusieurs avantages :

• aucun fichier image à charger
• affichage parfaitement net quelle que soit la résolution
• personnalisation rapide des couleurs
• taille facilement modifiable
• performances optimales

C’est donc une technique particulièrement appréciée des intégrateurs et des développeurs front-end.

Le principe qui rend cette astuce possible

Avant de voir le code, il faut comprendre ce qui se passe réellement.

Prenons un élément HTML vide :

<div class="triangle"></div>

Et appliquons-lui simplement des bordures :

.triangle {
    width: 0;
    height: 0;
    border: 50px solid;
}

À première vue, cela semble étrange. Pourquoi mettre une largeur et une hauteur à zéro ?

En réalité, lorsque la largeur et la hauteur d’un élément valent zéro, seules les bordures restent visibles.

Le navigateur dessine alors quatre triangles qui se rejoignent au centre :

• un triangle en haut
• un triangle en bas
• un triangle à gauche
• un triangle à droite

On obtient visuellement une sorte de losange composé de quatre triangles.

Imaginez une feuille de papier pliée en quatre. Chaque bordure forme alors une pointe dirigée vers le centre.

C’est précisément ce comportement que nous allons exploiter.

Reprenons ce même élément HTML avec le CSS suivant :

.triangle {
  width: 200px;
  height: 200px;
  border: 20px solid black;
}

Pour mieux comprendre, nous allons donner une couleur différente à chaque bordure :

.triangle {
  width: 200px;
  height: 200px;
  border: 20px solid black;
  border-left-color: red;
  border-right-color: yellow;
  border-top-color: orange;
  border-bottom-color: black;
}

Maintenant, nous allons réduite la hauteur et la largeur de notre div à 0 pour le laisser que les bordures :

.triangle {
  width: 0;
  height: 0;
  border: 20px solid black;
  border-left-color: red;
  border-right-color: yellow;
  border-top-color: orange;
  border-bottom-color: black;
}

On commence à deviner que les bordures forment 4 triangles. Si décide d’indiquer que trois bordures sont transparents, la dernière formera un triangle :

.triangle {
  width: 0;
  height: 0;
  border: 20px solid black;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: black;
}

Et voilà, nous avons dessiner un triangle en CSS !

Le principe est donc très simple :

Créer un triangle pointant vers le haut

Commençons par le cas le plus courant, celui que nous venons d’expliquer précédemment.

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #3498db;
}

Résultat :

Un triangle bleu, avec une taille différente de notre premier exemple.

Comprendre chaque ligne

Les bordures gauche et droite sont transparentes :

border-left: 50px solid transparent;
border-right: 50px solid transparent;

Elles existent toujours, mais elles sont invisibles.

La bordure inférieure est quant à elle colorée :

border-bottom: 80px solid #3498db;

Comme les autres bordures sont transparentes, seule celle-ci apparaît à l’écran.

• Le navigateur dessine alors naturellement un triangle.

C’est un peu comme si vous découpiez trois côtés invisibles autour d’une seule surface visible.

Créer un triangle vers le bas

Pour inverser le sens du triangle, il suffit de colorer la bordure opposée.

.triangle {
    width: 0;
    height: 0;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid #e74c3c;
}

Cette fois, le triangle pointe vers le bas.

Le principe reste exactement le même :

• les côtés restent transparents
• seule une bordure est visible
• cette bordure devient le triangle

Créer un triangle vers la droite

Passons maintenant à une orientation horizontale.

.triangle {
    width: 0;
    height: 0;

    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 80px solid #2ecc71;
}

Le triangle pointe désormais vers la droite. Parce que seule la bordure gauche est colorée. Les bordures supérieure et inférieure servent simplement à définir la hauteur du triangle.

Créer un triangle vers la gauche

Le même raisonnement s’applique.

.triangle {
    width: 0;
    height: 0;

    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 80px solid #f39c12;
}

Cette fois, le triangle pointe vers la gauche.

Vous commencez sans doute à voir la logique :

• on rend trois bordures transparentes ;
• on colore la quatrième ;
• cette bordure devient le triangle visible.

Modifier la taille du triangle

La taille dépend directement des valeurs des bordures.

Par exemple :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.triangle {
    width: 0;
    height: 0;

    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #3498db;
}

Produit un petit triangle.

Alors que :

.triangle {
    width: 0;
    height: 0;

    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #3498db;
}

Produit un triangle beaucoup plus grand.

Retenez simplement que :

• les bordures latérales déterminent la largeur ;
• la bordure colorée détermine la hauteur.

Créer un triangle isocèle ou allongé

Rien ne vous oblige à utiliser les mêmes valeurs partout.

Par exemple :

.triangle {
    width: 0;
    height: 0;

    border-left: 20px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 100px solid #9b59b6;
}

Le triangle devient asymétrique.

Cette possibilité peut être utile pour créer des effets graphiques originaux ou certains éléments décoratifs.

Utiliser un triangle CSS dans une infobulle

L’une des utilisations les plus fréquentes concerne les bulles d’information.

Imaginez une boîte de texte :

<div class="tooltip">
    Bonjour !
</div>

Puis son triangle :

.tooltip {
    position: relative;
    width: 200px;
    padding: 15px;
    background: #333;
    color: white;
}

.tooltip::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -15px;

    width: 0;
    height: 0;

    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #333;
}

Ici, le pseudo-élément ::after génère automatiquement un triangle sous la boîte.

C’est exactement la technique utilisée sur de nombreux sites web modernes.

👉 Pour aller plus loin : 5 exemples de tooltip moderne en CSS

Pourquoi width et height valent-ils zéro ?

Cette question revient souvent chez les débutants. Si vous donnez une taille normale à l’élément :

width: 100px;
height: 100px;

Le navigateur affichera également une surface centrale.

• Le triangle ne fonctionnera plus comme prévu.

Avec :

width: 0;
height: 0;

le centre disparaît totalement.

• Il ne reste que les bordures.

C’est précisément ce qui permet de transformer une simple bordure en forme géométrique.

Les erreurs les plus fréquentes

Lorsque l’on découvre cette technique, quelques pièges reviennent régulièrement.

Oublier transparent

Par exemple :

border-left: 50px solid red;
border-right: 50px solid blue;

Les bordures deviennent visibles. Vous n’obtiendrez plus un triangle propre.

Pensez toujours à utiliser :

transparent

pour les côtés qui doivent disparaître.

Donner une largeur à l’élément

Si vous ajoutez :

width: 100px;
height: 100px;

vous obtenez une forme totalement différente.

Le triangle repose justement sur l’absence de surface centrale.

Colorer plusieurs bordures

Si plusieurs bordures possèdent une couleur visible, plusieurs triangles apparaîtront simultanément.

Le résultat peut être intéressant pour certains effets graphiques, mais ce ne sera plus le triangle classique recherché.

Une technique toujours utilisée aujourd’hui

Même avec l’arrivée de nouvelles fonctionnalités CSS comme clip-path, les triangles réalisés avec border restent extrêmement populaires.

Parce qu’ils sont :

• simples
• rapides à mettre en place
• compatibles avec tous les navigateurs modernes
• légers
• faciles à personnaliser

Dans de nombreux projets professionnels, cette méthode demeure encore la solution privilégiée pour créer de petites flèches et indicateurs visuels.

---

FAQ : Triangle en CSS

---

Dessiner un triangle en CSS peut sembler magique la première fois que l’on découvre cette astuce. Pourtant, le principe est très logique : lorsque la largeur et la hauteur d’un élément sont nulles, seules les bordures subsistent. En rendant certaines bordures transparentes et en colorant celle qui nous intéresse, le navigateur crée naturellement un triangle.

Une fois cette mécanique comprise, vous pouvez créer des triangles dans toutes les directions, ajuster leur taille, modifier leurs proportions et les intégrer dans vos propres composants d’interface.

Maintenant que vous maîtrisez cette technique, je vous encourage à expérimenter. Essayez différentes tailles, mélangez plusieurs triangles, combinez-les avec des animations CSS ou explorez également des solutions plus avancées comme clip-path. C’est souvent en jouant avec le code que l’on découvre les astuces les plus utiles pour enrichir ses interfaces web.

👉 Découvrir la propriété clip-path en CSS.