<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.