html {
--s: 100px; /* control the size */
--c: #1BB0CE; /* first color */
--_g1:
var(--c) calc(25%/3) ,#0000 0 calc(50%/3),
var(--c) 0 25% ,#0000 0 75%,
var(--c) 0 calc(250%/3),#0000 0 calc(275%/3),
var(--c) 0;
--_g2:
#0000 calc(25%/3) ,var(--c) 0 calc(50%/3),
#0000 0 calc(250%/3),var(--c) 0 calc(275%/3),
#0000 0;
background:
linear-gradient( 45deg,var(--_g2)),linear-gradient( 45deg,var(--_g1)),
linear-gradient(-45deg,var(--_g2)),linear-gradient(-45deg,var(--_g1))
#DAD6CA; /* second color */
background-position: 0 0,var(--s) var(--s);
background-size: calc(2*var(--s)) calc(2*var(--s));
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.