<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.