<div class="box"></div>
.box {
  --r: 30px;
  display: inline-block;
  width: 300px;
  aspect-ratio: 1;
  border: 1px solid;
  background:
   radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r)/2),#0000 98%,#0000ffcf) 
    var(--r) calc(-1*var(--r)) no-repeat,
   radial-gradient(var(--r) at var(--r) calc(50% - var(--r)/2),green 98%,#0000),
   radial-gradient(var(--r) at calc(50% + var(--r)/2) calc(100% - var(--r)),purple 98%,#0000)
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.