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>
                    
                  

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 -->
                    
                  

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 -->
                    
                  

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 -->