html {
--s: 222px; /* control the size */
--_g: #7f727b 10%,#d6b4c2 10.5% 19%,#0000 19.5% 80.5%,#d6b4c2 81% 89.5%,#baa0ab 90%;
--_c: from -90deg at 37.5% 50%,#0000 75%;
--_l1: linear-gradient(145deg,var(--_g));
--_l2: linear-gradient( 35deg,var(--_g));
background:
var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
conic-gradient(var(--_c),#7f727b 0) calc(var(--s)/8) 0,
conic-gradient(var(--_c),#baa0ab 0) calc(var(--s)/2) 0,
linear-gradient(90deg,#baa0ab 38%,#7f727b 0 50%,#baa0ab 0 62%,#7f727b 0);
background-size: var(--s) calc(2*var(--s)/3);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.