Comment faire un triangle en CSS ?

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

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

                .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 :