<section class="section-one section">
<h1>Responsive Diagonal Sections</h1>
</section>
<section class="section-two section"></section>
<section class="section-three section">
<p><div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis asperiores, aperiam quibusdam ad cumque itaque enim! Repellendus libero cumque dignissimos sunt dicta atque, quam in aspernatur itaque iure ipsum aliquam!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate nesciunt quae eligendi et earum voluptate possimus pariatur nemo ullam? Esse repellat quia aliquam suscipit delectus hic sapiente quos, eligendi maxime?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum aperiam illum culpa! Accusamus reprehenderit voluptas nam, aspernatur tenetur maiores eius quas incidunt culpa dicta doloremque inventore enim porro deserunt iste.</div>
</p>
</section>
body {
font-family: Arial;
margin: 0;
}
.section-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 220px;
position: relative;
&:after {
position: absolute;
bottom: -95px;
left: 0;
content: '';
border-style: solid;
border-width: 0 0 6rem 100vw;
border-color: transparent #FFF transparent #FFF;
}
h1 {
font-size: 3em;
margin-bottom: 0;
}
h3 {
font-size: 1.4em;
margin: 0;
}
}
.section-two {
display: flex;
align-items: center;
color: white;
height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://newevolutiondesigns.com/images/freebies/black-white-background-24.jpg');
// background-attachment: fixed;
background-size: cover;
background-position: center;
}
.section-three {
height: 400px;
padding: 70px;
position: relative;
&:before {
position: absolute;
top: -95px;
left: 0;
content: '';
border-style: solid;
border-width: 0 0 6rem 100vw;
border-color: transparent #FFF #FFF transparent;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.