Comment créer un triangle CSS réactif en utilisant un pourcentage de largeur ?

Création d'un triangle CSS réactif avec une largeur en pourcentage

Le code fourni ci-dessous génère une flèche positionnée sous un signe element:

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

Cependant, cette méthode nécessite de spécifier la largeur du lien pour garantir la bonne taille de la flèche. Pour remédier à cette limitation, nous pouvons utiliser une approche réactive utilisant un pseudo-élément incliné et pivoté :

.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);
}

Cette approche garantit que le triangle conserve ses proportions avec la propriété padding-bottom. Supprimer la propriété width sur la classe .btn permet au triangle d'adapter sa taille en fonction de son contenu, le rendant ainsi totalement responsive.

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!