<section class="content white">
  <h1>Lorem ipsum</h1>
  <p>Quisque vitae feugiat nunc. Aenean rutrum iaculis lectus. Quisque lectus est, tristique vitae feugiat vitae, dapibus quis lacus.</p>
</section>

<div class="divider">
  <div class="custom-shape-divider-top-1631532852">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
      <path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill"></path>
    </svg>
  </div>
</div>

<section class="content blue">
  <h2>Morbi et gravida leo</h2>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id feugiat ex, ultricies volutpat diam.</p>
</section>

.custom-shape-divider-top-1631532852 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1631532852 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top-1631532852 .shape-fill {
    fill: #FFFFFF;
}

.divider {
  position: relative;
}

body {
  background: #0bd;
}
.content {
  padding: 2rem;
}
.white {
  background: #fff;
}
.blue {
  margin-top: 6rem;
}
h1, h2 {
  font-family: 'Lobster Two', cursive;
}