<main>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</main>

.outer {
    width: calc(50% - 10px);
    aspect-ratio: 1;
    --ofs: calc(-1 * var(--o)); 
    --sz: calc(var(--r) + var(--o));
    
    background-image:
        radial-gradient(circle at var(--cnr), transparent var(--r), white var(--r)),
        radial-gradient(circle at var(--cnr), transparent var(--r), white var(--r)),
        linear-gradient(45deg, rgb(210, 223, 246), rgb(51, 134, 242));
    background-repeat: no-repeat;
    background-size: var(--sz) var(--sz), var(--sz) var(--sz), cover;
    border-radius: var(--r);

    &:nth-of-type(1) {
        --w: 100px;
        --h: 30px;
        --o: 8px;
        --r: 10px;
        background-position: var(--ofs) var(--h), var(--w) var(--ofs), 0,0;
        --cnr: right bottom;
        align-content: start;
    }
    &:nth-of-type(2) {
        --w: 40px;
        --h: 80px;
        --o: 12px;
        --r: 6px;
        background-position: calc(100% - var(--ofs)) var(--h), calc(100% - var(--w)) calc(var(--ofs)), 0 0;
        --cnr: left bottom;
        align-content: start;
        .inner { margin-left: auto; }
    }
    &:nth-of-type(3) {
        --w: 20px;
        --h: 90px;
        --r: 4px;
        --o: 4px;
        background-position: calc(100% - var(--ofs)) calc(100% - var(--h)), calc(100% - var(--w)) calc( 100% - var(--ofs)), 0,0;
        --cnr: left top;
        align-content: end;
        .inner { margin-left: auto; }
    }
    &:nth-of-type(4) {
        --w: 80px;
        --h: 80px;
        --o: 8px;
        --r: 18px;
        background-position: var(--ofs) calc(100% - var(--h)), var(--w) calc(100% - var(--ofs)), 0,0;
        --cnr: right top;
        align-content: end;
        .inner { margin-right: auto; }
    }
    .inner {
        width: var(--w);
        height: var(--h);
        border-radius: inherit;
        outline: var(--o) solid white;
    }
}
main {
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
 body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    font: 12px 'poppins';
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}