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>
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>
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>
.
