.ribbon_parent {
  overflow: hidden; /* required */
  margin: 25px auto; /* for demo only */
  border:1px solid grey; /* for demo only */
  position: relative; /* required  for demo*/
}

.ribbon_top_right {
  margin: 0;
  padding: 0;
  background: rebeccapurple;
  color:white;
  position: absolute;
  top:0;
  right:0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
}

.ribbon {
  margin: 0;
  padding: 0;
  background: rebeccapurple;
  color:white;
  position: absolute;
  bottom:52px;
  right:22px;
  transform: translateX(30%) translateY(0%) rotate(-45deg);
  transform-origin: bottom right;
  font-size: small;
}


.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* tweak */
  width: 100%;
  height: 100%;
  background: rebeccapurple;
}
.ribbon:before {
  right:100%;
}

.ribbon:after {
  left:100%;
}





/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_fold_top_right {
  font-size: small;
  font-weight: bold;
  color: #fff;
}
.ribbon_fold_top_right {
  --f: .5em; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 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: #fe6726; /* the main color  */
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_fold_over {
  font-size: small;
  font-weight: bold;
  color: #fff;
}
.ribbon_fold_over {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  
  position: absolute;
  right: 20px;
  top: calc(-1*var(--f));
  padding: .2em;
  background: #fe6726;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
  clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 100%,calc(50% - var(--f)/2) calc(100% - var(--r)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) var(--f),100% var(--f));
}




/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_fold_bottom {
  _font-size: small;
  font-weight: bold;
  color: #fff;
}
.ribbon_fold_bottom {
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  
  position: absolute;
  bottom: 39px;
  right: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: #fe6726;
  border-top: var(--f) solid #0005;
  border-left: var(--r) solid #0000;
  clip-path: 
    polygon(0 100%,100% 100%,100% var(--f),calc(100% - var(--f)) 0,
      calc(100% - var(--f)) var(--f),0 var(--f),
      var(--r) calc(50% + var(--f)/2));
}



/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_fold_side {
  font-size: small;
  font-weight: bold;
  color: #fff;
}
.ribbon_fold_side {
  --r: .4em; /* control the ribbon shape (the radius) */
  --c: #fe6726;

  position: absolute;
  bottom: 20px;
  right: calc(-1*var(--r));
  line-height: 1.8; 
  padding: calc(2*var(--r)) .5em 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: 
    radial-gradient(100% 50% at right,var(--c) 98%,#0000 101%)
     0 100%/.5lh calc(100% - 2*var(--r)),
    radial-gradient(100% 50% at left,#0005 98%,#0000 101%) 
     100% 0/var(--r) calc(2*var(--r)),
    conic-gradient(at calc(100% - var(--r)) calc(2*var(--r)),var(--c) 75%,#0000 0)
     100% 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;   
}



/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_corsette {
  font-size: 5px !important;
  font-weight: bold;
  color: #fff;
}
.ribbon_corsette {
--c: #00e621;
--c: #fe6726;
    --r: 20%;
    padding: 5px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    position: absolute;
    z-index: 999;
    width: fit-content;
    box-sizing: border-box;
    bottom: -2px;
    right: 1px;
}
.ribbon_corsette:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 60% 20% -40%;
  background: color-mix(in srgb, var(--c), #000 35%);
  clip-path: polygon(5% 0,95% 0,100% 100%,50% calc(100% - var(--r)),0 100%);
}
.ribbon_corsette:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(35% 35%,#0000 96%,#0003 97% 99%,#0000) var(--c);
  clip-path: polygon(100.00% 50.00%,89.66% 55.22%,98.30% 62.94%,86.96% 65.31%,93.30% 75.00%,81.73% 74.35%,85.36% 85.36%,74.35% 81.73%,75.00% 93.30%,65.31% 86.96%,62.94% 98.30%,55.22% 89.66%,50.00% 100.00%,44.78% 89.66%,37.06% 98.30%,34.69% 86.96%,25.00% 93.30%,25.65% 81.73%,14.64% 85.36%,18.27% 74.35%,6.70% 75.00%,13.04% 65.31%,1.70% 62.94%,10.34% 55.22%,0.00% 50.00%,10.34% 44.78%,1.70% 37.06%,13.04% 34.69%,6.70% 25.00%,18.27% 25.65%,14.64% 14.64%,25.65% 18.27%,25.00% 6.70%,34.69% 13.04%,37.06% 1.70%,44.78% 10.34%,50.00% 0.00%,55.22% 10.34%,62.94% 1.70%,65.31% 13.04%,75.00% 6.70%,74.35% 18.27%,85.36% 14.64%,81.73% 25.65%,93.30% 25.00%,86.96% 34.69%,98.30% 37.06%,89.66% 44.78%); /* from https://css-generators.com/starburst-shape/ */
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_1 {
  font-size: 6px !important;
  font-weight: bold;
  color: #fff;
}
.ribbon_1 {
    --c: #2dce9a;
    --c: #A38B00;

    padding: .6em 1.3em;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    position: absolute;
    bottom: 30px;
    right: 11px;
    z-index: 0;
    width: fit-content;
    box-sizing: border-box;
}
.ribbon_1:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 50% 0 auto;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--c), #000 35%);
  clip-path: polygon(calc(100%/3) 0,calc(200%/3) 0,100% 90%,calc(200%/3) 100%,calc(100%/3) 0,calc(200%/3) 0,calc(100%/3) 100%,0 90%);
}
.ribbon_1:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(35% 35%,#0000 96%,#0003 97% 99%,#0000) var(--c);
  clip-path: polygon(100.00% 50.00%,89.66% 55.22%,98.30% 62.94%,86.96% 65.31%,93.30% 75.00%,81.73% 74.35%,85.36% 85.36%,74.35% 81.73%,75.00% 93.30%,65.31% 86.96%,62.94% 98.30%,55.22% 89.66%,50.00% 100.00%,44.78% 89.66%,37.06% 98.30%,34.69% 86.96%,25.00% 93.30%,25.65% 81.73%,14.64% 85.36%,18.27% 74.35%,6.70% 75.00%,13.04% 65.31%,1.70% 62.94%,10.34% 55.22%,0.00% 50.00%,10.34% 44.78%,1.70% 37.06%,13.04% 34.69%,6.70% 25.00%,18.27% 25.65%,14.64% 14.64%,25.65% 18.27%,25.00% 6.70%,34.69% 13.04%,37.06% 1.70%,44.78% 10.34%,50.00% 0.00%,55.22% 10.34%,62.94% 1.70%,65.31% 13.04%,75.00% 6.70%,74.35% 18.27%,85.36% 14.64%,81.73% 25.65%,93.30% 25.00%,86.96% 34.69%,98.30% 37.06%,89.66% 44.78%); /* from https://css-generators.com/starburst-shape/ */
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_2 {
  font-size: small;
  font-weight: bold;
  color: #fff;
}
.ribbon_2 {
      --r: .4em;
    position: absolute;
    z-index: 999;
    top: 392px;
    inset-inline: calc(-1*var(--r));
    text-align: center;
    line-height: 1.8;
    padding: calc(2*var(--r)) .5em 0;
    border-radius: var(--r);
    --_g: 0/var(--r) calc(2*var(--r)) no-repeat;
    background: radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0    var(--_g),
    radial-gradient(100% 50% at left ,#0005 98%,#0000 101%) 100% var(--_g),
    conic-gradient(at var(--r) calc(2*var(--r)),#0000 25%,#fe6726 0)
     0 0/calc(100% - var(--r)) 100%;
 
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon_3 {
  font-size: 5px !important;
  font-weight: bold;
  color: #fff;
}
.ribbon_3 {
      --c: #2699dc;
    --r: 20%;
    padding: 1.3em;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    position: absolute;
    z-index: 999;
    width: fit-content;
    bottom: 62px;
    left: 19px;
}
.ribbon_3:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 60% 20% -40%;
  background: color-mix(in srgb, var(--c), #000 35%);
  clip-path: polygon(5% 0,95% 0,100% 100%,50% calc(100% - var(--r)),0 100%);
}
.ribbon_3:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10%;
  rotate: 45deg;
  outline: .1em solid #0003;
  background: var(--c);
  outline-offset: -.4em;
  border-radius: .3em;
}