<main class="container">
  <section class="gradient">
    <h1>Top Section</h1>
  </section>
  
  <section class="separador-top separador-bottom">
    <h1>Mid Section</h1>
  </section>
  
  <section class="gradient">
    <h1>Bottom Section</h1>
  </section>
</main>
$rosa: #ff4169;
$lilaz: #7c26f8;
$branco: #fff;

*{
  box-sizing: border-box;
  font-family: sans-serif;
  margin:0;
  padding:0;
}

.container{
  width: 100%;
}

.gradient{
  background-image: linear-gradient(50deg,$rosa,$lilaz);
  color: #fff;
}

section{
  padding:120px 0;
  display:flex;
  justify-content: center;
  align-items: center;
}

.separador-top{
  background: $branco;
  position: relative;
  
  &:before{
    content: "";
    position: absolute;
    top: -60px;
    border-style: solid;
    border-width: 0 0 60px 100vw;
    border-color: transparent $branco $branco transparent;
  }
}

.separador-bottom{
  background: $branco;
  position: relative;
    
  &:after{
    content: "";
    position: absolute;
    bottom: -60px;
    border-style: solid;
    border-width: 60px 100vw 0 0;
    border-color: $branco transparent transparent $branco;
    }
}
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.