<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(50% - var(--r)/2) 0,#0000 98%,red) var(--r)  
      0/100% var(--r) no-repeat,
		radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r)/2),#0000 98%,#0000ffcf) 
      var(--r) 50%/100% calc(100% - 2*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)
}