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;
    /* background: radial-gradient(40px at calc(100% - 40px) calc(100% - 40px), #0000 98%, #000),
    radial-gradient(20px at calc(100% - 20px) calc(100% - 100px), #0000 98%, #000); */
    border-radius: 20px;
    border-bottom-right-radius: 40px;
    --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)
    ; 
    
    /* --mask:
    radial-gradient(20px at calc(100% - 20px) calc(100% - 100px), #0000 98%, #000),
    radial-gradient(40px at calc(100% - 40px) calc(100% - 40px), #000 100%, #0000)
    ; */
    /* --mask: radial-gradient(circle at 100%, #e66465, #9198e5 50%); */
    -webkit-mask: var(--mask);
    mask: var(--mask);
    
    /*clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 80px),
    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); */
}