<h2 class="ribbon top" >An infinite Ribbon</h2>
<h2 class="ribbon bottom" style="--c: #8A9B0F">An infinite Ribbon</h2>

.ribbon {
  --r: .8em; /* control the cutout */
  --c: #bd1550;
  
  padding-inline: 1lh calc(var(--r) + .25em);
  border-image: conic-gradient(var(--c) 0 0) fill 0//9999px;
  outline: 9999px solid #0004;
  /* width: fit-content; you may need this in your real use case */
}
.top {
  clip-path: polygon(1lh 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1lh 0,1lh -9999px,0 -9999px,0 0);
}
.bottom {
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1lh 100%,1lh 9999px,0 9999px,0 100%);
}
/* the 9999px is a very big value. Use what you want but make sure it's the same everywhere. If you use a small value you get another kind of ribbon without the infinite feature */


@supports not (height:1lh ) {
  .ribbon {
    padding-inline: 1.7em calc(var(--r) + .25em);
  }
  .top {
    clip-path: polygon(1.7em 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1.7em 0,1.7em -9999px,0 -9999px,0 0);
  }
  .bottom {
    clip-path: polygon(1.7em 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1.7em 100%,1.7em 9999px,0 9999px,0 100%);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 20px;
  background: #f2f2f2;
}

h2 {
  font-family: sans-serif;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.7;
  color: #fff;
}