Comment créer des formes de ruban CSS avec un seul élément

Utilisez des conseils CSS modernes pour créer des formes de ruban CSS cool avec juste une petite quantité de code! Cet article montrera comment créer diverses formes de ruban à l'aide d'éléments uniques et de variables CSS et d'obtenir de belles animations en volants sans avoir besoin de tailles fixes ou de nombres magiques.

Points clés:

• Les conseils CSS modernes facilitent la création de formes de ruban CSS, contrôlées avec un seul élément et des variables CSS, sans avoir besoin de tailles fixes ou de numéros magiques.
• La création de formes de ruban CSS implique de définir des variables qui contrôlent les formes et les couleurs, en utilisant clip-path pour recadrer la forme souhaitée et en utilisant box-shadow pour créer des parties pliées du ruban.
Les unités
• CSS lh (correspondant aux valeurs line-height) sont utilisées pour contrôler la hauteur du ruban et peuvent être utilisées en conjonction avec les variables clip-path et CSS pour créer d'excellentes animations de volants.
• La création d'une forme de ruban CSS rotative consiste à utiliser de nouvelles fonctions trigonométriques et des variables CSS et calc(), recadrez les parties de l'élément principal avec des couleurs de gradient et créez les pièces derrière l'élément principal avec des pseudo-éléments.

Cet article explorera des façons approfondies de créer deux types de formes de ruban CSS: ruban plié et ruban rotatif.

Créer une forme de ruban CSS pliée

Tout d'abord, définissez les variables qui définissent la forme du ruban:

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

Ensuite, utilisez principalement l'attribut clip-path. La figure suivante montre la forme du polygone à utiliser:

Ajoutez la marge intérieure pour éviter de recadrer le texte, puis appliquez clip-path:

.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}

Utiliser l'unité CSS LH

Les unités

lh correspondent aux valeurs line-height. Étant donné que l'utilisation de texte unique, line-height définit la hauteur de contrôle, 1lh est équivalent à la hauteur de l'élément. Dans clip-path, il est nécessaire de couper la forme d'un triangle isocèle. 1lh

Pour créer une section effondrée, utilisez toujours

et mettez à jour le polygone précédent. L'intelligence de clip-path est qu'elle peut recadrer le contenu "à l'extérieur" de la frontière de l'élément. En ajoutant clip-path, la pièce coupée extérieure peut être rendue visible. box-shadow

Mise à jour clip-path pour contenir quatre nouveaux points, dont trois en dehors de l'élément:

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

Enfin, ajoutez un dégradé et un autre box-shadow pour terminer l'effet d'ombre.

(Le code d'animation de survol et le code détaillé du ruban rotatif sont omis ici, car la longueur est trop longue, mais les images clés et les extraits de code sont conservés. Le code complet peut être trouvé sur Codepen, comme montré dans le texte d'origine.

Conclusion

Cet article explore les fonctionnalités CSS modernes telles que les variables CSS,

et les fonctions trigonométriques, et les combine pour créer des formes de ruban fraîches. Pour plus d'exemples, veuillez vous référer à la collection complète dans le lien original.

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!