<div class="box">
  <div class="ribbon right">Brownie</div>
  <div class="ribbon right " style="top:60px;--f:5px;--r:0px;background:#0B486B">plum halvah</div>
  <div class="ribbon left" style="top:calc(100% - 100px);--f:15px;--r:20px;background:#FA6900">liquorice <br>marzipan</div>
</div>

.ribbon {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  
  position: absolute;
  top: 10px;
  padding-inline: 10px;
  background: #BD1550;
  border-bottom: var(--f) solid #0005;
  color: #fff;
  line-height: 1.3em;
  font-family: sans-serif;
  font-size: 25px;
}
.left {
  left: calc(-1*var(--f));
  border-right: var(--r) solid #0000;
  clip-path: 
    polygon(100% 0,0 0,0 calc(100% - var(--f)),var(--f) 100%,
      var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2));
}
.right {
  right: calc(-1*var(--f));
  border-left: var(--r) solid #0000;
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
}


.box {
  max-width:500px;
  height:250px;
  margin:50px auto;
  background:lightblue;
  position:relative;
}