You can try like below: Show code snippet Another adjustment to add a shadow effect to the folded part: Show code snippet You can add position option: Show code snippet

In respond to Create a CSS tag over a score card in div (tagged as a duplicate) but can give here hints to anyone else too You are trying to evaluate a rotation and a translation together to position your ribbon, absolute coordonate + rotate + transform-origin can make it much easier to manage. You can also use transform-origin to decide where it should rotate around and oversize it (to overflow enough to make it also grow a few lines if needed) and set a padding where areas will can be cut off , overflow:hidden can used to hide both sides. below your CSS revisited and an example wrapping a few lines . body { display: flex; } .project-card { margin: 1em; height: 350px; width: 300px; background-color: blue; position: relative; overflow: hidden; } .achievement-label { position: absolute; width: 300px; padding: 0.3rem 90px; box-sizing: border-box; background-color: red; transform: rotateZ(-45deg); top: 0; left: 0; transform-origin: 150px 150px; text-align: center; } <div class="project-card"> <div class="achievement-label">Winner <br> Is The Big <br>Best.</div> </div> <div class="project-card"> <div class="achievement-label">Winner</div> </div> Run code snippetExpand snippet For the clip-path, you are trying also to keep a 45deg angle, you may decide to draw that path over a square and cut it in half to get that 45deg angle. meanwhile let's take a look at shape-outside which has a similar syntax and lets content flow around a shape. With some extra markup, you can use float shape-outside (same syntax than clip-path) in place off the padding area to cut off, to let the text follow the shape if it goes under a few lines. To clip on a 45deg direction, you need to start from a square, offset coordonates of clip-path can be standing outside, here the oversize on each size of the ribbon is about 90px, so let's use a 90px square to draw that path within. previous example revisited with extra tags below: body { display: flex; } .project-card { margin: 1em; height: 350px; width: 300px; background-color: blue; position: relative; } .achievement-label { display: grid;/* (or flex) will make height:100% meaning full for the direct children of the grid cells element (<p><i>)*/ position: absolute; width: 300px; padding: 0.3rem 0; box-sizing: border-box; background-color: red; transform: rotateZ(-45deg); top: 0; left: 0; transform-origin: 150px 150px; text-align: justify; text-align-last: justify; color: white; clip-path: polygon(90px 0, calc(100% - 90px) 0, 100% 90px, 0 90px); } p { margin: 0; } div.achievement-label i { float: left; height: 100%; width: 80px; shape-outside: polygon(0 0, 90px 0%, 0 90px, 0% 90px);/* NOTE works as long as height is not taller than 90px */ background: tomato; } div.achievement-label i+i { float: right; shape-outside: polygon(0 0, 90px 0, 90px 90px, 90px 90px); } <div class="project-card"> <div class="achievement-label"> <p><i></i><i></i> Winner Is The Best <br>Is Really The Best <br> ... -/- ....</p> </div> </div> <div class="project-card"> <div class="achievement-label"> <p><i></i><i></i> Winner Is The Best </p> </div> </div> Run code snippetExpand snippet for a -45deg you can eventually use css var() and calc() to have to set only the width of your ribbon. possible examples body { display: flex; flex-wrap:wrap; } .project-card { margin: 1em; height: 350px; width: 300px; background-color: blue; position: relative; overflow: hidden; } .achievement-label { text-align: center; position: absolute; box-sizing: content-box; top: 0; left: 0; transform: rotate(-45deg); /* init ribbon position for a -45deg rotation at top right corner */ --width: 150px; --edgeOffset: calc( var(--width) / 2); --topOffset: calc( (var(--width) *.9)); width: var(--width); transform-origin: 0 var(--edgeOffset); margin-top: var(--topOffset); padding: 0.3rem var(--edgeOffset); /* see padding areas */ background: linear-gradient(to right, red var(--edgeOffset), tomato var(--edgeOffset), tomato calc(100% - var(--edgeOffset)), red calc(100% - var(--edgeOffset))); } .bis { width: 200px; height: 200px; } .ter { width: 350px; height: 100px; } .last { width:100%; height:80vh; min-width:200px; min-height:200px; } <div class="project-card"> <div class="achievement-label">defaut set </div> </div> <div class="project-card bis"> <div class="achievement-label" style="--width:125px;">125px</div> </div> <div class="project-card ter"> <div class="achievement-label" style="--width:100px;">100px</div> </div> <div class="project-card last"> <div class="achievement-label" style="--width:250px;">250px</div> </div> Run code snippetExpand snippet

Try using a Linear Gradient. To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, ...) Source: W3Schools.com