Comment faire un triangle en CSS ?

Nous créons un carré via un élément HTML de type div ou span. Dans notre exemple, nous utiliserons la classe triangle.

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

.triangle {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

Nous modifions la couleur des différents côtés afin de les distinguer visuellement.

.triangle {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: red blue gold green ;
}

Nous augmentons l’épaisseur des bordures du carré. L’épaisseur de la bordure correspondra à la moitié de la longueur de l’hypothénuse du triangle.

Vous pouvez d’ores et déjà remarquer que les bordures se finissent en biseau.

.triangle {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 50px;
  border-color: red blue gold green ;
}

Nous réduisons maintenant les dimensions (largeur et hauteur) du carré à 0.

Nous obtenons ainsi quatre triangles de couleurs différentes.

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px;
  border-color: red blue gold green ;
}

Nous masquons les trois triangles que nous ne voulons pas en changeant leur couleur.

Pour cette démonstration, les bordures sont en gris, mais elles doivent être réglées sur transparent pour être invisibles.

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px;
  border-color: transparent transparent gold transparent;
}

Nous pouvons finir en supprimant la bordure qui ne nous sert à rien.

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent gold transparent;
}

Faire varier l’épaisseur des bordures permet de personnaliser notre triangle

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 50px 80px 20px;
  border-color: transparent transparent gold transparent;
}