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.