html:before {
--s: 150px; /* the size */
--g: 10px; /* the gap */
--r: 15px; /* the radius */
content: "";
position: fixed;
inset: var(--g);
--_g: radial-gradient(var(--r) at var(--r) var(--r),#000 98%,#0000);
--_o: calc(-2*var(--r) - var(--g));
-webkit-mask:
var(--_g),var(--_g) var(--_o) 0,var(--_g) 0 var(--_o),var(--_g) var(--_o) var(--_o),
conic-gradient(at calc(var(--s) - 2*var(--r)) var(--s),#0000 75%,#000 0) var(--r) 0,
conic-gradient(at var(--s) calc(var(--s) - 2*var(--r)),#0000 75%,#000 0) 0 var(--r);
-webkit-mask-size: calc(var(--s) + var(--g)) calc(var(--s) + var(--g));
background: linear-gradient(45deg, pink, skyblue);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.