Comment créer un triangle réactif basé sur un pourcentage en CSS ?

CSS : générer un triangle réactif basé sur un pourcentage

Le défi vient de la création d'une flèche sous un élément de lien hypertexte à l'aide de CSS, mais en spécifiant le la largeur de la bordure en pixels présente une limitation de réactivité. Cet article présente une solution qui utilise un pseudo-élément asymétrique et tourné pour obtenir un triangle avec un dimensionnement basé sur un pourcentage.

Mise en œuvre d'un triangle réactif

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

Dans le Classe ".btn", nous supprimons la largeur fixe, permettant à la taille du triangle de s'adapter à la largeur du contenu. Le pseudo-élément ".btn:after" est positionné de manière absolue, skewX et pivoté pour créer la forme du triangle, et sa couleur d'arrière-plan correspond à l'arrière-plan du bouton.

En utilisant padding-bottom, nous conservons les proportions du triangle. . Cette approche garantit que le triangle reste réactif, en se redimensionnant proportionnellement au contenu du texte et à l'URL du lien hypertexte.

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!