JSFiddle - React, Tailwind, and code Playground

by berrym

HTML

<div id="demo" class="card" style=""></div>

CSS

#demo {
    min-height: 250px;
    height: 40vh;
    height: round(40vh,1px);
}

.card {
    background: #F7F2EA;
    border-radius: 20px;
    --size: 40pt;
    
    background:
    radial-gradient(circle at calc(100% - 40px) calc(100% - 40px), red 40px, #0000 40px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 100px), blue 20px, #0000 20px),
    linear-gradient(#F7F2EA, #F7F2EA)
    ;
    
    clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 100px),
    calc(100% - 20px) calc(100% - 60p),
    calc(100% - 40px) calc(100% - 80px),
    calc(100% - 80px) 100%,
    0 100%
    );
    
    /* background-position: right; */
    /* background-size: calc(100% - 20px)/80px; */
    
    /* --mask:radial-gradient(
        var(--size) at 100% 100%,
        #0000 98%,
        #000
      )
      radial-gradient(
        var(--size) at 100% 100%,
        #0000 98%,
        #000
      )
    ;
    -webkit-mask: var(--mask);
    mask: var(--mask); */
}