Comment puis-je créer un triangle CSS réactif avec une largeur basée sur un pourcentage ?

Triangle CSS réactif avec une largeur basée sur un pourcentage

En CSS, nous pouvons créer un triangle en utilisant des bordures en définissant différentes largeurs pour le haut et bordures inférieures. Cependant, lorsque vous utilisez des pourcentages pour la largeur du lien, la taille de la flèche ne peut pas être ajustée dynamiquement en fonction du contenu du lien.

Solution : Triangle basé sur un pourcentage

Pour créer un triangle réactif qui adapte sa taille au contenu du lien, on peut utiliser un pseudo élément avec un angle incliné et tourné transformation :

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

Explication :

• Le pseudo élément est positionné de manière absolue et sa couleur de fond est héritée du lien.
• La propriété padding-bottom (15 % dans cet exemple) définit la hauteur du triangle en pourcentage de la hauteur du lien. largeur.
• Incliner et faire pivoter le triangle crée la forme souhaitée.
• L'indice z négatif garantit que le triangle est derrière le contenu du lien.

Avantages :

• La taille du triangle est automatiquement ajustée en fonction du lien largeur.
• Les proportions du triangle sont conservées.

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!