- var n = 0;

while ++n < 200
	div
View Compiled
div {
	display: inline-block;
	padding: 2em;
	margin: .2em;
	background: hsl(var(--hue, 325) 60% 50%);
	border-radius: var(--tl, 0) var(--tr, 0) var(--br, 0) var(--bl, 0)
}

div:nth-child(2n) { --tl: 4em; }
div:nth-child(3n) { --tr: 4em; }
div:nth-child(5n) { --br: 4em; }
div:nth-child(7n) { --bl: 4em; }

div:nth-child(11n    ) { --hue: 32; }
div:nth-child(11n + 1) { --hue: 64; }
div:nth-child(11n + 2) { --hue: 96; }
div:nth-child(11n + 3) { --hue: 128; }
div:nth-child(11n + 4) { --hue: 160; }
div:nth-child(11n + 5) { --hue: 192; }
div:nth-child(11n + 6) { --hue: 224; }
div:nth-child(11n + 7) { --hue: 256; }
div:nth-child(11n + 8) { --hue: 288; }
div:nth-child(11n + 9) { --hue: 320; }
div:nth-child(11n + 10) { --hue: 352; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.