Pourquoi mes triangles de pseudo-éléments CSS ont-ils une mauvaise forme ?

Création de triangles HTML/CSS avec des pseudo-éléments

Lorsque vous essayez de créer une forme triangulaire à l'aide de pseudo-éléments, vous rencontrez un résultat incorrect. Vous observez une forme indésirable plutôt que celle souhaitée.

Pour résoudre ce problème, il est crucial de comprendre la cause profonde liée à l'utilisation des bordures. Reportez-vous au lien fourni sur le fonctionnement des triangles CSS et vous obtiendrez une compréhension plus approfondie du comportement des bordures et de son impact sur le résultat.

Une solution alternative qui crée efficacement un triangle consiste à utiliser la rotation et les bordures. Voici comment :

.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);
}

<div class="box"></div>

Cette approche combine un pseudo-élément pivoté avec des bordures pour produire la forme triangulaire souhaitée. L'angle de rotation spécifié détermine l'orientation du triangle.

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!