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

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-19 19:54:11417parcourir

Why Are My CSS Pseudo-Element Triangles Distorted, and How Can I Fix Them?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn