:root {
  --yellow-color-1: #f9bb00;
  --yellow-color-2: #ef7e06;
  --yellow-color-3: #f7ac00;
}

.ribbon {
  --ribbon-color-1: var(--yellow-color-1);
  --ribbon-color-2: var(--yellow-color-2);
  --ribbon-color-3: var(--yellow-color-3);
  position: relative;
  padding: 0.5rem 1rem;
  color: white;
  background: var(--ribbon-color-1);
}
.ribbon .block:nth-child(1), .ribbon .block:nth-child(2) {
  position: absolute;
  bottom: -20%;
  width: 2rem;
  height: 20%;
  background: var(--ribbon-color-2);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.ribbon .block:nth-child(1) {
  left: 0;
}
.ribbon .block:nth-child(2) {
  right: 0;
  transform: scaleX(-1);
}
.ribbon .block:nth-child(3), .ribbon .block:nth-child(4) {
  position: absolute;
  z-index: -1;
  top: 20%;
  width: 4rem;
  height: 100%;
  background: var(--ribbon-color-3);
  clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);
}
.ribbon .block:nth-child(3) {
  left: -2rem;
}
.ribbon .block:nth-child(4) {
  right: -2rem;
  transform: scaleX(-1);
}