JSFiddle - React, Tailwind, and code Playground

by vadimkot

HTML

<div>
    <span class="top-l"></span>
    <span class="top-r"></span>
    <span class="bottom-r"></span>
    <span class="bottom-l"></span>
</div>

CSS

div{
    width: 200px;
    height: 200px;
    background: #f00;
    overflow: hidden;
    margin: 25px auto;
    position: relative;
}
div span{
    position: absolute; 
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
}
div span.top-l{
    left: -25px;
    top: -25px;
}
div span.top-r{
    right: -25px;
    top: -25px;
}
div span.bottom-l{
    left: -25px;
    bottom: -25px;
}
div span.bottom-r{
    right: -25px;
    bottom: -25px;
}