html {
--s: 170px; /* control the size*/
--_c: #0000 75%,#3B8686 0; /* color 1 */
--_g1: conic-gradient(at 20.71% 50%,var(--_c));
--_g2: conic-gradient(at 50% 20.71%,var(--_c));
background:
var(--_g1) calc(var(--s)/ 6.828) calc(var(--s)/2),var(--_g1) calc(var(--s)/-2.828) 0,
conic-gradient(from 45deg at 29.29% 29.29%,var(--_c)) calc(var(--s)/-6.828) 0,
var(--_g2) calc(var(--s)/2) calc(var(--s)/-2.828),var(--_g2) 0 calc(var(--s)/ 6.828),
conic-gradient(from -135deg at 29.29% 70.71%,var(--_c)) calc(var(--s)/-6.828) 0,
#CFF09E /* color 2 */;
background-size: var(--s) var(--s), var(--s) var(--s), calc(var(--s)/2) calc(var(--s)/2);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.