.boxR {
    /*display: inline-block;*/
    /*width: 250px;*//
    aspect-ratio: 1;
    /*margin: 20px;*/
    /*background: #ccc;*//
    position: relative;
    font-size: 16px;
    font-family: sans-serif;
}

.ribbonR {
    --f: 15px; /* control the folded part */
    position: absolute;
    top: 0;
    color: #fff;
    padding: .1em 1.8em;
    background: var(--c,#45ADA8);
    border-bottom: var(--f) solid #0007;
    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))
}

.rightR {
    right: 0;
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
}

.leftR {
    left: 0;
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
}

/* a fix for firefox that show some strange lines*/
@supports (-moz-appearance:none) {
    .ribbonR {
        background: linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box, linear-gradient(var(--c,#45ADA8) 0 0) 50%/ calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
        border-bottom-color: #0000;
    }
}

/*
body {
    text-align: center;
}
*/