Comment créer un triangle CSS parfait à l'aide de pseudo-éléments ?

Forme triangulaire CSS avec des pseudo-éléments

Dans une tentative de reproduire une forme triangulaire à l'aide de pseudo-éléments, on peut rencontrer des difficultés comme le démontrent les captures d'écran fournies. Pour résoudre ce problème, explorons des approches alternatives.

Le code original utilisait des bordures pour créer le triangle. Toutefois, les bordures ne sont pas idéales à cet effet en raison de leurs propriétés inhérentes. Au lieu de cela, une combinaison de rotation et de bordures peut donner des résultats plus précis.

L'extrait de code suivant propose une solution :

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

Ce code positionne le pseudo-élément comme vous le souhaitez, en utilisant la rotation pour créer la forme triangulaire. Les propriétés de bordure garantissent la précision des dimensions de la forme.

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!