JSFiddle - React, Tailwind, and code Playground

by vadimkot

HTML

<div>
    <span class="top"></span>     
    <span class="bottom"></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:before,
div > span:after{
    content: '';
    position: absolute; 
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
}
div > span.top:before{
    left: -25px;
    top: -25px;
}
div > span.top:after{
    right: -25px;
    top: -25px;
}
div > span.bottom:before{
    left: -25px;
    bottom: -25px;
}
div > span.bottom:after{
    right: -25px;
    bottom: -25px;
}