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

.box {
  width:200px;
  display:inline-block;
  aspect-ratio:1;
}
.first {
   background: 
    conic-gradient(#0000 25%,blue 0 50%,#0000 0 75%,purple 0),
    radial-gradient(30px,#0000 98%,#000) 10000% 10000%/99.5% 99.5%
}
.second {
  background:linear-gradient(45deg,blue,red); 
  -webkit-mask: 
    conic-gradient(#0000 25%,blue 0 50%,#0000 0 75%,purple 0),
    radial-gradient(30px,#0000 98%,#000) 10000% 10000%/99.5% 99.5%
}

body {
  background:pink;
}