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

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

L'un des défis courants en CSS est de créer des formes avec des bordures. L'une de ces formes qui peut être difficile à créer est un triangle transparent avec une bordure visible.

Approche conventionnelle

Comme vous l'avez mentionné dans votre question, une approche courante consiste à utilisez des bordures pour créer l'illusion d'un triangle :

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

Bien que cette méthode puisse obtenir la forme souhaitée, elle implique d'utiliser une astuce avec des bordures, qui peut ne pas être idéale dans certaines situations.

Solution WebKit uniquement

Pour une approche plus élégante, vous pouvez utiliser une solution WebKit uniquement qui exploite le caractère ▲ :

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

Cette technique utilise le -webkit-text-stroke pour créer un trait autour du personnage, ce qui donne une forme en forme de triangle. La propriété color est définie sur transparent pour rendre le personnage lui-même invisible.

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!