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

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 :

• http://apps.eky.hk/css-triangle-generator
• https://outils-css.aliasdmc.fr/generateur-de-triangles-css.php
• https://codepen.io/yukulele/pen/KLnhJ

Sauf mention contraire*, l'article Comment faire un triangle en CSS ? et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.