section
	p Sequence repeats every 7 * 11 = 77 items
	- var n = 0;

	while ++n < 200
		pre

pre {
	clip-path: polygon(var(--clip-top), var(--clip-bottom));
}

pre:nth-of-type(7n),
pre:nth-of-type(7n + 3),
pre:nth-of-type(7n + 6){
	--clip-bottom: 100% 100%, 0 calc(100% - 1.5em);
}

pre:nth-of-type(7n + 1),
pre:nth-of-type(7n + 4) {
	--clip-bottom: 100% calc(100% - 1.5em), 0 100%;
}

pre:nth-of-type(7n + 2),
pre:nth-of-type(7n + 5){
	--clip-bottom: 100% 100%, 0 100%;
}

pre:nth-of-type(11n),
pre:nth-of-type(11n + 3),
pre:nth-of-type(11n + 6),
pre:nth-of-type(11n + 9) {
	--clip-top: 0 0, 100% 2em;
}

pre:nth-of-type(11n + 1),
pre:nth-of-type(11n + 4),
pre:nth-of-type(11n + 7),
pre:nth-of-type(11n + 10) {
	--clip-top: 0 2em, 100% 0;
}

pre:nth-of-type(11n + 2),
pre:nth-of-type(11n + 5),
pre:nth-of-type(11n + 8) {
	--clip-top: 0 0, 100% 0;
}

/* The following is just styling and is unrelated to the demo */
body {
	font: 100%/1.5 Helvetica Neue, sans-serif;
}

h2 {
	line-height: 1;
}
pre {
	display: inline-block;
	border: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 2em 1.5em;
	box-sizing: content-box;
	background: hsl(35 100% 50%);
}