JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
        <div class="block"></div>
        <span class="lt"></span>
        <span class="rt"></span>
        <span class="rb"></span>
        <span class="lb"></span>
    </div>

CSS

.wrap{
    position: relative;
    display: inline-block;
    margin: 50px 100px;
    border: 1px solid #ccc;
}

span{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    z-index: -1;
    
}

.lt{
    background: red;
    clip: rect(auto, 175px, 175px, auto);
}

.rt{
    background: blue;
    clip: rect(auto, auto, 175px, 175px);
}

.rb{
    background: green;
    clip: rect(175px, 175px, auto, auto);
}

.lb{
    background: orange;
    clip: rect(175px, auto, auto, 175px);
}

.block{
    position: relative;
    width: 290px;
    height: 290px;
    margin: 20px;
    border-radius: 50%;
    background: #ccc;
}