/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 28px;
    font-weight: bold;
    font-family: 'Arial Rounded MT';
    color: #111;
}

.ribbon {
    --s: 4em; /* the ribbon size */
    --a: 40deg; /* the angle of the folded part */
    --r: .8em; /* the cutout part */
    --c: #FE8F20;
    line-height: 1.9;
    padding-inline: calc(1lh*tan(var(--a)/2) + .3em);
    margin-top: calc(var(--s)*sin(var(--a)));
    clip-path: polygon(0 0,0 -999px,100% -999px,100% 0,calc(100% - 1lh*tan(var(--a)/2)) 100%,calc(1lh*tan(var(--a)/2)) 100%);
    background-color: var(--c);
    width: fit-content;
    position: relative;
}

    .ribbon:before,
    .ribbon:after {
        content: "";
        position: absolute;
        top: 0;
        height: 1lh;
        width: var(--s);
        background: color-mix(in srgb,var(--c),#000 40%);
    }

    .ribbon:before {
        right: 0;
        transform-origin: top right;
        rotate: var(--a);
        clip-path: polygon(0 0,100% 0,calc(100% - 1lh/tan(var(--a))) 100%,0 100%, var(--r) 50%);
    }

    .ribbon:after {
        left: 0;
        transform-origin: top left;
        rotate: calc(-1*var(--a));
        clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,calc(1lh/tan(var(--a))) 100%);
    }