Pourquoi mes triangles de pseudo-éléments CSS sont-ils déformés et comment puis-je les corriger ?

Triangle avec pseudo-éléments CSS : dépannage et solution alternative

En tentant de créer une forme de triangle à l'aide de pseudo-éléments, un utilisateur a rencontré un résultat inattendu, conduisant à un triangle déformé. Le problème vient de l’utilisation des frontières. Pour comprendre pourquoi, reportez-vous à cette explication complète : Comment fonctionnent les triangles CSS ?

Pour résoudre ce problème, une approche alternative consiste à exploiter la rotation et les bordures :

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

Cette alternative utilise les propriétés de bordure. pour créer la forme du triangle et la positionner par translation. De plus, il intègre une rotation pour obtenir l'angle souhaité.

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!