<style> /* Appliquer un ruban à la rangée */ #row-33298a79 { position: relative; /* Nécessaire pour positionner le ruban */ } /* Ruban avec texte */ #row-33298a79::before { content: "RÉDUCTION -15%"; /* Texte affiché sur le ruban */ font-size: 12px; /* Taille du texte */ font-weight: bold; /* Texte en gras */ color: #fff; /* Couleur du texte */ --f: 0.5em; /* Contrôle la taille de la partie pliée */ position: absolute; top: 0; right: 0; line-height: 1.8; padding: 5px 20px; /* Espacement autour du texte */ border-image: conic-gradient(#ff000088 0 0) 51%/var(--f); clip-path: polygon( 100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px) ); transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg); transform-origin: 0% 100%; background-color: #FF2F4E; /* Couleur principale */ z-index: 10; /* Place le ruban au-dessus de la rangée */ } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter