Comment créer un triangle transparent avec une bordure en utilisant CSS ?

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

Créer des formes complexes avec CSS peut être un défi, 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 :

<code class="css">.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}</code>

<code class="html"><div class="triangle">&#9650;</div></code>

Ce code exploite la propriété de trait 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!