<section class="section">
	<section class="container">
		<section class="content">
			<h2>Section 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut omnis enim aspernatur quisquam, temporibus, sed culpa consequuntur ab iusto ea est eveniet in provident! Ex saepe itaque iure rerum non.</p>
		</section>
	</section>
</section>
<section class="section">
	<section class="container">
		<section class="content">
			<h2>Section 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt autem omnis illum atque, eligendi provident? Inventore itaque, quae, impedit saepe voluptate aliquid optio error eaque nesciunt aspernatur excepturi, eos earum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam esse, eaque nisi tempora molestiae corporis voluptas minima necessitatibus mollitia itaque animi vel deserunt corrupti fugit, ullam quam molestias aliquam! Nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolorum nemo sint? Facilis necessitatibus voluptatum vero eius sed numquam voluptatem voluptas ducimus quis, molestiae, commodi, earum quo! Inventore, magni, quod.</p>
			<p>Beatae quos inventore similique, perferendis aut, dolorem fugiat suscipit quia recusandae modi voluptates! Aliquid iste aspernatur, laborum ab modi sunt tempora, fugiat molestias. Beatae atque quam ab autem perferendis vero?</p>
		</section>
	</section>
</section>
<section class="section">
	<section class="container">
		<section class="content">
			<h2>Section 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis fugit sint temporibus enim rem expedita, officia quis quaerat exercitationem neque totam dicta magnam, eum quidem ut veniam! Harum, assumenda labore!</p>
		</section>
	</section>
</section>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,700)
*::before, *, *::after
	box-sizing: border-box
@-ms-viewport
	width: device-width
body
	font:
		family: Raleway, sans-serif
		weight: 300
		size: 1em
	color: white
	background-color: black
	background-image: linear-gradient(#FF6B6B, #556270)
	background-attachment: fixed
	min-height: 100vh
	display: flex
	flex-direction: column
	overflow-x: hidden
	overflow-y: auto
	-ms-overflow-style: -ms-autohiding-scrollbar
	&::-webkit-scrollbar
		display: none
h1, h2, h3
	font-weight: 700
	margin: 0 0 0.5em 0
h2
	font-size: 2em
p
	margin: 0
.container
	width: 90%
	max-width: 899px
	margin: 0 auto
.content
	padding: 2em 0
	text-align: center
.section:nth-child(even)
	background: white
	color: #5D5D5D
	position: relative
	&::before
		position: absolute
		bottom: 100%
		content: ''
		width: 0
		height: 0
		border-bottom: 2em solid white
		border-left: 100vw solid transparent
	&::after
		position: absolute
		top: 100%
		content: ''
		width: 0
		height: 0
		border-top: 2em solid white
		border-left: 100vw solid transparent
	&:last-of-type::after
		border: none
.section:nth-child(odd)
	padding: 2em 0
	&:first-of-type
		padding-top: 0
	&:last-of-type
		padding-bottom: 0
		flex-grow: 1
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.