.container02 {
  --d: 6px; /* folded part */
  --c: red; /* color */
  --f: 16px; /* ribbon font-size */

  max-width: 200px;
  max-height: 200px;
  position: relative;
  display: inline-block;
  margin: 20px;
  background: lightblue;
}

.container02::before {
  content: attr(data-ribbon);
  position: absolute;
  font-size: var(--f);
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  color: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-bottom: 0;
  transform-origin: bottom left;
  padding: 5px 35px calc(var(--d) + 5px);
  background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d)
    no-repeat var(--c);
  background-clip: padding-box;
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),0 100%);
  -webkit-mask: linear-gradient(135deg,transparent calc(50% - var(--d) * 0.707),#fff 0) bottom left,
    linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)bottom right;
  -webkit-mask-size: 300vmax 300vmax;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}