<header>
  <h1>Header Content</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon class="svg--lg" fill="white" points="0,0 5,30 10,0 15,30 20,0 25,30 30,0 35,30 40,0 45,30 50,0 55,30 60,0 65,30 70,0 75,30 80,0 85,30 90,0 95,30 100,0 100,100 0,100" />
  </svg>
</header>

<section>
  <h1>Content</h1>
</section>

* {
   margin:0;
   padding:0;
}
body {
   font-family: 'Lato', sans-serif;
}
h1 {
   padding: 100px 0;
   font-size: 44px;
   text-align: center;
}
header {
   position: relative;
   height: 350px;
   background-image: linear-gradient(#8140c4, #26bca9);
   h1 {
      color: white;
   }
   svg {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 10vw;
   }
}