<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 50, 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;
   }
}
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.