SVG Divider

A collection of SVG dividers.

Examples

Content goes here

Content goes here

Content goes here

Image Description
Image Description
Image Description 
<div class="row mb-7">
  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <div class="container text-center position-relative z-index-2 space-2">
        <h3 class="text-white">Content goes here</h3>
      </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 -->
  </div>

  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <div class="container text-center position-relative z-index-2 space-2">
        <h3 class="text-white">Content goes here</h3>
      </div>

      <!-- SVG Shapes -->
      <figure class="mb-n1">
        <svg class="position-absolute top-0 right-0 bottom-0 h-100" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100.1 1920" height="100%">
          <path fill="#fff" d="M0,1920c0,0,93.4-934.4,0-1920h100.1v1920H0z"/>
        </svg>
      </figure>
      <!-- End SVG Shapes -->
    </div>
    <!-- End SVG Shape -->
  </div>

  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <div class="container text-center position-relative z-index-2 space-2">
        <h3 class="text-white">Content goes here</h3>
      </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 -->
  </div>
</div>

<div class="row">
  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <img class="img-fluid" src="../assets/img/500x280/img3.jpg" alt="Image Description">

      <!-- 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 -->
  </div>

  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <img class="img-fluid" src="../assets/img/500x280/img3.jpg" alt="Image Description">

      <!-- SVG Shapes -->
      <figure class="mb-n1">
        <svg class="position-absolute top-0 right-0 bottom-0 h-100" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100.1 1920" height="100%">
          <path fill="#fff" d="M0,1920c0,0,93.4-934.4,0-1920h100.1v1920H0z"/>
        </svg>
      </figure>
      <!-- End SVG Shapes -->
    </div>
    <!-- End SVG Shape -->
  </div>

  <div class="col-lg-4">
    <!-- SVG Shape -->
    <div class="position-relative bg-primary overflow-hidden">
      <img class="img-fluid" src="../assets/img/500x280/img3.jpg" alt="Image Description">

      <!-- 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 -->
  </div>
</div>
Copy

Content 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">Content 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 -->
Copy

Content 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">Content 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 -->
Copy

Content 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">Content 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 -->
Copy
Logo

Developed by Nasim Mahmud's team | Blueberry Framework · Powered by Nimusoft

© Blueberry. 2020 Nimusoft. All rights reserved.