Créer un triangle transparent avec bordure à l'aide de CSS

Créer des formes complexes avec CSS peut être difficile, mais lorsqu'il s'agit de triangles, il existe différentes approches pour obtenir l'objectif souhaité. effet.

Une méthode que vous avez expérimentée consiste à utiliser des bordures. Bien que cette technique fonctionne, elle repose sur des astuces visuelles. Existe-t-il une solution plus élégante ?

Oui, il y en a ! Une approche exclusive au webkit consiste à exploiter le caractère Unicode U 25B6 (▲). Voici comment :

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

▲

Ce code exploite la propriété de contour de texte pour décrire le caractère sous forme de triangle. La transparence des couleurs permet à l'intérieur de rester vide, tandis que la taille de la police contrôle la taille de la forme.

Bien que cette solution soit spécifique aux navigateurs Webkit, elle offre une manière concise et visuellement frappante de restituer un triangle transparent avec frontière.