Comment puis-je créer correctement des triangles à l'aide de pseudo-éléments HTML/CSS ?

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

Lorsqu'ils tentent de créer une forme triangulaire à l'aide de pseudo-éléments, certains utilisateurs peuvent rencontrer des résultats inattendus . Cet article vise à résoudre le problème courant et à proposer une solution alternative.

Le code initial fourni, qui utilise les propriétés de bordure, ne parvient pas à produire le triangle souhaité en raison des limitations du modèle de bordure. Pour les triangles, une approche alternative est recommandée.

Utilisation de la rotation et de la bordure

Pour créer un triangle à l'aide de cette méthode, suivez ces étapes :

1. Définissez un élément parent avec une bordure pour servir de base au triangle.
2. Créez un pseudo élément au sein de l'élément parent et positionnez-le au-dessus et légèrement sur le côté de la base.
3. Utilisez la propriété transform: rotate(45deg) pour faire pivoter le pseudo-élément de 45 degrés.
4. Ajoutez des bordures au pseudo-élément, en laissant la droite côté dégagé pour former le sommet du triangle.

Par exemple :

.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 méthode exploite la rotation propriété pour créer efficacement la forme de triangle souhaitée.

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!