<div class="banner">
  <svg id="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 112">
    <path d="M0,0,947.071,112,1920,0ZM1920,112H0V0H1920Z" fill="#fff" fill-rule="evenodd"></path>
  </svg>
</div>

<div class="banner">
  <svg id="diagonal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 200">
    <polygon points="0 198.225 0 200 1920 200 1920 0 0 198.225" fill="#fff" />
  </svg>
</div>

<div class="banner">
  <svg id="curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 100">
    <path d="M960,99.138C600.325,99.138,268.169,61.289,0,0V100H1920V0C1651.831,61.289,1319.675,99.138,960,99.138Z" fill="#fff" />
  </svg>
</div>

<div class="banner">
  <svg id="offset-triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 198.5">
    <polygon points="540 196.5 0 98.5 0 198.5 1920 198.5 1920 0 540 196.5" fill="#fff" />
  </svg>
</div>

<div class="banner">
  <svg id="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 98">
    <path d="M0,100H1920V50s-199.017,48-532,48C942.522,98,885.982,2,520,2,173.517,2,0,50,0,50v50Z" fill="#fff" />
  </svg>
</div>
.banner {
  position: relative;
  width: 100%;
  height: 15em;
  margin-bottom: 5em;

  // BG Image
  background-image: url("https://unsplash.it/1920/500?image=0&blur");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
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.