Comment créer des triangles CSS réactifs avec une largeur en pourcentage ?

Génération de triangles CSS réactifs avec un pourcentage de largeur

Problème :

Création de flèches ci-dessous les éléments utilisant CSS peuvent être délicats car la largeur des bordures de la flèche ne peut pas être définie en pixels. Cela rend difficile la réalisation d'un triangle réactif.

Solution :

Pour créer un triangle réactif à l'aide de CSS, vous pouvez utiliser un pseudo incliné et pivoté élément.

Mise en œuvre :

1. Créer un conteneur externe :

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

2. Ajouter le triangle :

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

Version adaptative :

Pour rendre le triangle réactif, modifiez le conteneur extérieur et les styles de triangle comme suit :

1. Réactif Conteneur :

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

2. Triangle réactif :

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

Remarque : La propriété padding-bottom maintient les proportions du triangle. La suppression de la largeur sur .btn permet à la forme d'ajuster sa taille en fonction de son contenu.

Cette implémentation CSS crée un triangle avec une largeur basée sur un pourcentage qui conserve ses proportions et ajuste sa taille en fonction des dimensions du conteneur. .

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!