Shape Divider: CSS embed SVG content: simplest

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

by Roberto Apasajja

HTML

aaaa
<header>
  tttt
</header>

<div class="zzz">
  dddd
</div>

CSS

header {
  position: relative;
  height: 150px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon fill='white' points='0,100 100,50 100,100'/></svg>"), linear-gradient(#ff9d2f, #ff6126);
  background-size: 2000px 100%;
}

.zzz{
  background: white;
}