Comment créer un ruban CSS réactif avec un coin plié ?

Comment créer un ruban CSS réactif avec un coin plié

Créer des rubans avec CSS

Il est possible de créer un ruban CSS réactif avec un coin plié coin en procédant comme suit :

1. Créez un conteneur : Créez un div conteneur pour contenir le ruban.

   <code class="css">.container {
     width: 200px;
     height: 200px;
     position: relative;
     margin: 20px;
     overflow: hidden;
   }</code>

   Copier après la connexion

2. Ajoutez un rectangle d'arrière-plan : Ajoutez un div enfant à l'intérieur du conteneur avec une couleur d'arrière-plan unie pour représenter le ruban.

   <code class="css">.box {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0.8; /* for demo purpose  */
   }</code>

   Copier après la connexion

3. Créez le ruban :Ajoutez un autre div enfant à l'intérieur du conteneur et appliquez les styles suivants :

   <code class="css">.stack-top {
     height: 30px;
     z-index: 9;
     margin: 40px; /* for demo purpose  */
     transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
     transition: transform 2s;
     color: #fff;
   }</code>

   Copier après la connexion

Solution alternative

Pour des conceptions de ruban plus élaborées et personnalisables, vous peut explorer des ressources telles que https://css-generators.com/ribbon-shapes/. Ce site Web vous permet de sélectionner différentes formes de ruban et de générer le code CSS correspondant.

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!