SVG Divider

A collection of SVG dividers.

Examples

Title goes here

<!-- SVG Shape -->
<div class="position-relative bg-primary overflow-hidden">
  <div class="container text-center position-relative z-index-2 space-3">
    <h2 class="display-4 text-white">Title goes here</h2>
  </div>

  <!-- SVG Shapes -->
  <figure class="position-absolute right-0 bottom-0 left-0 mb-n1">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
      <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
    </svg>
  </figure>
  <!-- End SVG Shapes -->
</div>
<!-- End SVG Shape -->

Title goes here

<!-- SVG Shape -->
<div class="position-relative bg-primary overflow-hidden">
  <div class="container text-center position-relative z-index-2 space-3">
    <h2 class="display-4 text-white">Title goes here</h2>
  </div>

  <!-- SVG Shapes -->
  <figure class="position-absolute bottom-0 right-0 left-0">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
      <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
    </svg>
  </figure>
  <!-- End SVG Shapes -->
</div>
<!-- End SVG Shape -->

Title goes here

<!-- SVG Shape -->
<div class="position-relative bg-img-hero" style="background-image: url(../../assets/svg/components/abstract-shapes-12.svg);">
  <div class="container text-center position-relative z-index-2 space-3">
    <h2 class="display-4 text-white">Title goes here</h2>
  </div>

  <!-- SVG Shapes -->
  <figure class="position-absolute bottom-0 right-0 left-0">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
      <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
    </svg>
  </figure>
  <!-- End SVG Shapes -->
</div>
<!-- End SVG Shape -->
Contact Us