<div class="grid">
<div class="bx">
<div class="cir cir1"></div>
</div>
<div class="bx">
<div class="cir cir2"></div>
</div>
<div class="bx">
<div class="cir cir3"></div>
</div>
<div class="bx">
<div class="cir cir4"></div>
</div>
</div>
<style>
body {
background: #2F5A76;
display: grid;
place-content: center;
height: 100%;
width: 100%;
margin: 0;
}
.grid {
width: 13.75rem;
height: 13.75rem;
display: grid;
grid-template-columns: 1fr 1fr;
}
.bx {
position: relative;
overflow: hidden;
}
.cir {
height: 200%;
width: 200%;
background: #F5BB60;
border-radius: 50%;
position: absolute;
}
.cir1 {top: -100%}
.cir3 {top: -100%; left: -100%;}
.cir4 {left: -100%;}
.cir2, .cir3 {background: #F56760}
</style>