Comment faire un triangle en CSS ?

Publié le par Julien Crego
Mise à jour le

L’animation suivante vous présente la méthode à employer pour construire un triangle en utilisant uniquement du HTML et du CSS.

Principe de fonctionnement

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Exemple de code

Code HTML :

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

Code CSS :

.triangle {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 100px;
    border-left-width: 100px;
    border-bottom: 200px solid #000;
}

Générateur en ligne

Vous pouvez également trouver des générateurs de triangle CSS en ligne :