Faire un triangle en pure CSS

J'avais noté l'URL d'un générateur en ligne qui était bien pratique mais il a disparu, comme souvent les pages web disparaissent… Au lieu d'en chercher un autre, je note juste un exemple ici, pour illustrer le principe.

Pour faire un triangle orienté vers la droite comme ceci , on peut styler un élément ou un pseudo-élément ::after ou ::before de cette manière :

#triangle {
  display: inline-block;

  /* Si on utilise un pseudo-élément, il faut rajouter content: ""; évidemment */;

  /* C'est en jouant sur la bordure qu'on va le matérialiser, pas sur sa boite de contenu */
  width: 0;
  height: 0;

  /* Quand on veut un triangle vers la droite, on utilise le bord gauche et vice-versa */
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;

  /* Ensuite, on le positionne ou on l'aligne comme on veut… */
  vertical-align: middle;
}

On peut le déformer en jouant sur l'épaisseur de chaque morceau de bordure.
On peut le tourner avec un transform: rotate(30deg) par exemple.