Ribbon on Card

.ribbon {
  background: #fc0;
  padding: 12px 32px 16px 32px;
  border-radius: 16px 16px 16px 0px;
  font-family: 'Zen Maru Gothic', sans-serif;
  line-height: 1;
  font-weight: 700;
  font-size: 1.76rem;
  color: black;
  padding-left: 32px;
  position: absolute;
  left: -16px;
  top: 32px;
  box-shadow: 0.7px 1.1px 6.6px -2px rgba(0, 0, 0, 0.024), 1.3px 2px 11px -2px rgba(0, 0, 0, 0.037), 1.9px 2.8px 13.3px -2px rgba(0, 0, 0, 0.048), 2.6px 3.9px 13.7px -2px rgba(0, 0, 0, 0.057), 3.9px 5.8px 13.4px -2px rgba(0, 0, 0, 0.064), 8px 12px 26px -2px rgba(0, 0, 0, 0.07);
}
.ribbon::before {
  background: #fc0;
  display: block;
  content: "";
  width: 16px;
  height: 32px;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 0 0 0 16px;
}

.ribbon::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.40940126050420167) 0%, rgba(0, 0, 0, 0) 150%);
  display: block;
  content: "";
  width: 16px;
  height: 32px;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 16px 0 0 16px;
}