Shapes - Documentation | Front - Multipurpose Responsive Template

Curved

Preview
HTML

              
                <!-- Shape Container -->
                <div class="shape-container">
                  <img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="Image Description">

                  <!-- Shape -->
                  <div class="shape shape-bottom zi-1">
                    <svg 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"></path>
                    </svg>
                  </div>
                  <!-- End Shape -->
                </div>
                <!-- End Shape Container -->

Angles

Use .shape-top for top positioning

Preview
HTML

              
                <!-- Shape Container -->
                <div class="shape-container">
                  <img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="Image Description">

                  <div class="shape shape-top zi-1">
                    <svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M0 0H3000V600L0 0Z" fill="#fff"/>
                    </svg>
                  </div>
                </div>
                <!-- End Shape Container -->

                <!-- Shape Container -->
                <div class="shape-container">
                  <img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="Image Description">

                  <div class="shape shape-top zi-1">
                    <svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3000 0H0V600L3000 0Z" fill="#fff"/>
                    </svg>
                  </div>
                </div>
                <!-- End Shape Container -->

Use .shape-bottom for bottom positioning

Preview
HTML

              
                <!-- Shape Container -->
                <div class="shape-container">
                  <img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="Image Description">

                  <div class="shape shape-bottom zi-1">
                    <svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M0 600H3000V0L0 600Z" fill="#fff"/>
                    </svg>
                  </div>
                </div>
                <!-- End Shape Container -->

                <!-- Shape Container -->
                <div class="shape-container">
                  <img class="img-fluid" src="../assets/img/documentation/img7.jpg" alt="Image Description">

                  <div class="shape shape-bottom zi-1">
                    <svg width="3000" height="600" viewBox="0 0 3000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3000 600H0V0L3000 600Z" fill="#fff"/>
                    </svg>
                  </div>
                </div>
                <!-- End Shape Container -->