Maison > interface Web > tutoriel CSS > Comment créer un triangle réactif basé sur un pourcentage en CSS ?

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

Barbara Streisand
Libérer: 2024-12-03 08:16:09
original
897 Les gens l'ont consulté

How to Create a Responsive Percentage-Based Triangle in 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);
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal