Full Responsive ribbons

Cuadros para insertar en nuestro Blog Full responsive ribbons el cual es responsives muy atractivos.

CODIGO HTML

<div class="container" data-ribbon="A ribbon"> </div> <div class="container" data-ribbon="1 Month !!" style="--d:0px;--c:orange;--f:25px;"> </div> <div class="container" data-ribbon="20%" style="--d:8px;--c:red"> </div> <div class="container left" data-ribbon="Pormotion" style="--d:10px;--c:green;--f:13px"> </div> <div class="container" data-ribbon="a huge Pormotion" style="--d:15px;--c:purple"> </div> <div class="container left" data-ribbon="many line content here " style="--d:15px;--c:pink;--f:20px"> </div> <div class="container left" data-ribbon="many line content here " style="--d:0px;--c:orange;--f:18px"> </div>

CODIGO CSS

.container { --d: 6px; /* folded part */ --c: blue; /* color */ --f: 16px; /* ribbon font-size */ width: 200px; height: 180px; position: relative; display: inline-block; margin: 20px; background: lightblue; } .container::before { content: attr(data-ribbon); position: absolute; font-size: var(--f); top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); color: #fff; text-align: center; border: 1px solid transparent; border-bottom: 0; transform-origin: bottom left; padding: 5px 35px calc(var(--d) + 5px); background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d) no-repeat var(--c); background-clip: padding-box; 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%); -webkit-mask: linear-gradient(135deg,transparent calc(50% - var(--d) * 0.707),#fff 0) bottom left, linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)bottom right; -webkit-mask-size: 300vmax 300vmax; -webkit-mask-composite: destination-in; mask-composite: intersect; } .left::before { left: 0; right: auto; transform: translate(-29.29%, -100%) rotate(-45deg); transform-origin: bottom right; } body { text-align: center; background: #f2f2f2; }

REALIZADO POR:  Temani Afif

ORIGEN DE LA ENTRADA: https://codepen.io/t_afif/pen/bGBaKWo