.box {
  overflow: hidden;
  padding: 1px;
}
.inner {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px 40px;
  position: relative;
}
.ribbon {
  font-size: .6rem;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: -2px;
  left: -2px;
  line-height: 1.8;
  box-shadow: 0 0 4px rgba(100, 100, 100, .2);
  padding-inline: 1.3lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  background-color: #cc0000;
}