@import url("custom.css?v=10");
/* HTML: <div class="ribbon">Your text content</div> */

.ribbon {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: 0.5em; /* control the folded part*/
  --r: 0.8em; /* control the ribbon shape */

  position: absolute;
  top: 20px;
  left: calc(-1 * var(--f));
  padding-inline: 0.25em;
  line-height: 1.8;
  background: var(--bs-info);
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(
    calc(100% - var(--r)) 0,
    0 0,
    0 calc(100% - var(--f)),
    var(--f) 100%,
    var(--f) calc(100% - var(--f)),
    calc(100% - var(--r)) calc(100% - var(--f)),
    100% calc(50% - var(--f) / 2)
  );
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon-top-left {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.ribbon-top-left {
  --f: 0.4em; /* control the folded part */
  --r: 0.8em; /* control the cutout */

  position: absolute;
  left: 20px;
  top: calc(-1 * var(--f));
  padding: 0.2em;
  border: solid #0000;
  border-width: 0 0 var(--r) calc(2 * var(--f));
  background: radial-gradient(50% 100% at bottom, #0005 98%, #0000 101%) 0 0 /
    calc(2 * var(--f)) var(--f) no-repeat border-box;
  background-color:var(--bs-primary);
  border-radius: var(--f) var(--f) 0 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + var(--f)) calc(100% - var(--r)),
    calc(2 * var(--f)) 100%,
    calc(2 * var(--f)) var(--f),
    0 var(--f)
  );
}