Shape Divider: SVG in HTML: simplest

https://css-tricks.com/creating-non-rectangular-headers/#article-header-id-1

by onbootstrap

HTML

<header>
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' style='position: absolute; bottom: 0; width: 100%; height: 10vw;'>
    <polygon fill='white' points='0,100 100,0 100,100'/>
  </svg>
  
  
</header>

<div class='zzz'>
  
</div>

CSS

header {
  position: relative;
  height: 150px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
}

.zzz{
  background: white;
}