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 :

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.