Skewed page blocks (clip-path)

by PhilQ

HTML

<section><div>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div></section>
<section><div>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div></section>
<section><div>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div></section>

SCSS

html,body{margin:0px;padding:0px;}
$skewHeight: 50px;
body{
	*,:before,:after{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	padding-top: $skewHeight;
}

section {
	position: relative;
	display: block;
    overflow: hidden;
	transform-origin: 50% 50%;
	padding: $skewHeight 0px;
	margin-top: -$skewHeight;
	
	div {
		display: block;
		background-color: rgba(black, 0.5);
		transform-origin: 50% 50%;
	}
	
	&:nth-child(odd) {
		-webkit-clip-path: polygon(0% 0%, 100% $skewHeight, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% $skewHeight, 100% 100%, 0% 100%);
		background-color: red;
		//transform: rotate( 3deg );
		div {
			//transform: rotate( -3deg );
		}
	}
	&:nth-child(even) {
		-webkit-clip-path: polygon(0% $skewHeight, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% $skewHeight, 100% 0%, 100% 100%, 0% 100%);
		background-color: blue;
		//transform: rotate( -3deg );
		div {
			//transform: rotate( 3deg );
		}
	}
}