.ribbon{font-size:12px;font-weight:700;color:#fff;--f:0.4em;position:absolute;top:0;left:0;line-height:1.6;padding-inline:.8em;padding-bottom:var(--f);border-image:conic-gradient(#0008 0 0) 51% /var(--f);-webkit-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));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:#f07818}