Utiliser un fichier PNG l'image est une option, mais elle n'est pas idéale pour la réactivité. Voici comment le créer uniquement avec CSS :
<code class="css">.container { width: 200px; height: 150px; position: relative; display: inline-block; margin: 10px; background: lightblue; } .stack-top { --d: 5px; --g: 16px; --c: #333; position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); color: #fff; text-align: center; width: 100px; transform-origin: bottom left; padding: 5px 0 calc(var(--d) + 5px); background: linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left, linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right; background-size: 51% 100%; background-repeat: no-repeat; clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), 0 100% ); }</code>
Vous pouvez ajuster les variables suivantes pour personnaliser l'apparence du ruban :
Pour utiliser le ruban, ajoutez simplement le code HTML suivant à votre document :
<code class="html"><div class="container"> <div class="stack-top">1Month</div> </div></code>
Vous pouvez également spécifier les variables personnalisées directement dans le HTML en utilisant l'attribut style, comme vu dans l'exemple mis à jour ci-dessous :
<code class="html"><div class="container"> <div class="stack-top" style="--d: 0px; --g: 19px; width: 120px; --c: blue">1Month</div> </div></code>
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!