<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
<div class="box fourth"></div>

.box {
  width:200px;
  display:inline-block;
  aspect-ratio:1.5; 
}
.first {
  background:
    radial-gradient(30px at 0    0   ,#0000 98%,red  ) 0     0   /51% 51% no-repeat,
    radial-gradient(30px at 100% 0   ,#0000 98%,blue ) 100%  0   /51% 51% no-repeat,
    radial-gradient(30px at 0    100%,#0000 98%,green) 0     100%/51% 51% no-repeat,
    radial-gradient(30px at 100% 100%,#0000 98%,purple) 100% 100%/51% 51% no-repeat;
}
.second {
  background:
    radial-gradient(30px at 0    0   ,#0000 98%,red  ) 0     0   /51% 51% no-repeat,
    radial-gradient(30px at 0    100%,#0000 98%,green) 0     100%/51% 51% no-repeat,
    radial-gradient(30px at 100% 100%,#0000 98%,purple) 100% 100%/51% 51% no-repeat;
}
.third {
  background:
    radial-gradient(30px at 0    0   ,#0000 98%,red  ) 0     0   /100% 51% no-repeat,
    radial-gradient(30px at 0    100%,#0000 98%,green) 0     100%/51%  51% no-repeat,
    radial-gradient(30px at 100% 100%,#0000 98%,purple) 100% 100%/51%  51% no-repeat;
}
.fourth {
  background:linear-gradient(45deg,red,blue);
  -webkit-mask:
    radial-gradient(30px at 0    0   ,#0000 98%,red  ) 0     0   /100% 51% no-repeat,
    radial-gradient(30px at 0    100%,#0000 98%,green) 0     100%/51%  51% no-repeat,
    radial-gradient(30px at 100% 100%,#0000 98%,purple) 100% 100%/51%  51% no-repeat;
}


body {
  background: pink;
}