section.n3
	h2 Alternate bottom on :nth-child(3n + 1)
	p Sequence repeats every 6 items, alternate bottom on 33.34% of shapes
	- var n = 0;

	while ++n < 100
		pre

section.n3.n5
	h2 Alternate bottom on :nth-child(3n + 1), :nth-child(5n + 1)
	p Sequence repeats every 30 items, alternate bottom on 46.67% of shapes
	- var n = 0;

	while ++n < 100
		pre

section.n3.n5.n7
	h2 Alternate bottom on :nth-child(3n + 1), :nth-child(5n + 1), child(7n + 1)
	p Sequence repeats every 210 items, alternate bottom on 52.38% of shapes
	- var n = 0;

	while ++n < 100
		pre

pre {
	clip-path: polygon(var(--clip-top), var(--clip-bottom));
	--clip-top: 0 0, 100% 2em;
	--clip-bottom: 100% calc(100% - 1.5em), 0 100%;
}

pre:nth-of-type(odd) {
	--clip-top: 0 2em, 100% 0;
}

.n3 pre:nth-of-type(3n + 1),
.n5 pre:nth-of-type(5n + 1),
.n7 pre:nth-of-type(7n + 1){
	--clip-bottom: 100% 100%, 0 calc(100% - 1.5em);
}

/* 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%);
}