Comment créer un triangle CSS réactif à l'aide de pourcentages ?

Triangle CSS réactif avec pourcentages de largeur

Le code CSS ci-dessous crée une flèche juste en dessous d'un élément  :

.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 approche nécessite de spécifier la largeur du lien pour obtenir la taille de flèche souhaitée. Pour créer un triangle réactif qui évolue en fonction de la largeur du lien, utilisez le code suivant :

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

Ce code utilise un pseudo-élément incliné et pivoté pour créer un triangle qui conserve ses proportions en fonction du lien. hauteur. Si vous préférez que la taille du triangle s'adapte à son contenu, supprimez la largeur de la classe .btn.

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!