Triangles en CSS

En CSS, on peut, à partir d'une div par exemple, créer un triangle grace aux sous-propriétés border

L'astuce consiste à utiliser la taille de la bordure via les propriétés suivantes:

  • border-width

Voyons un exemple

Démo

le code CSS

position:relative; width:0px; height:0px; border-color:transparent transparent #cb0000; border-style: solid; border-width:0px 100px 100px 100px;

Plutot simple mais efficace!

Téléchargement

le fichier css

le code HTML

<div class="triangle"> </div>
retourner en haut de la page