CSS Section Divider Generator

<section class="section-with-divider">
  <div class="section-content">
    <!-- Your section content -->
  </div>
  <div class="section-divider">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
      <path d="M 0 56 Q 100 23.68 200 56 Q 300 88.32 400 56 Q 500 23.68 600 56 Q 700 88.32 800 56 Q 900 23.68 1000 56 Q 1100 88.32 1200 56 L 1200 120 L 0 120 Z" fill="currentColor" />
    </svg>
  </div>
</section>

.section-with-divider {
  position: relative;
  overflow: hidden;
  background: #0f1d3a;
  padding: 5rem 1.5rem;
}

.section-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 96px;
  color: #f8fafc;
  line-height: 0;
  transform: scaleX(1) scaleY(1);
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}