- var n = 0;

while ++n < 60
	p This is a sample code snippet below. And this is sample text between the code snippets. Bacon ipsum dolor amet porchetta strip steak beef kielbasa. Pork loin porchetta tongue brisket, picanha filet mignon turkey capicola.
	pre: code 
		| function yolo() {
		|	return foo.bar();
		|}
View Compiled
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;
}

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

/* The following is just styling and is unrelated to the demo */
p {
	max-width: 80ch;
	margin: auto;
}

pre {
	position: relative;
	border: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 2em calc(50% - 40ch);
	box-sizing: content-box;
	background: hsl(35 100% 95%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.