<header>
  <h1>Header Content</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="white" points="0,100 100,0 100,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;
   }
}