CodePen Embed - Section Divider

<div class="hero-section">
  <div class="hero-section__content">
    <h1>Section Headi</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin lacus ligula, eu iaculis arcu faucibus sit amet. Donec facilisis et libero sed ullamcorper.</p>
  </div>
  <div class="divider-bottom">
    <svg x="0px" y="0px" viewBox="0 0 1200 161.5"><path class="st0" d="M0,84.6c388.8,213.9,783.8-270.7,1200,0v76.9H0V84.6z"/></svg>
  </div>
</div>

.hero-section {
  position: relative;
  background-image: url(https://picsum.photos/1200/500);
  background-size: cover;
  overflow: hidden;
  min-height: 500px;
}
.hero-section__content {
  padding: 46px 96px;
  color: white;
}
.divider-bottom {
  position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    display: block;
    line-height: 0;
    fill: white;
    z-index: 30;
}

This Pen is owned by Patrick Hladun on CodePen.

See more by @patrickhladun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.