Maison  >  Article  >  interface Web  >  Comment créer un ruban CSS réactif avec un coin plié ?

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

DDD
DDDoriginal
2024-11-01 08:54:30246parcourir

How to Create a Responsive CSS Ribbon with a Folded Corner?

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>
  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>
  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>

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!

Déclaration:
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