<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <section id="area1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"> <path class="elementor-shape-fill" fill="#ffffff" d="M761.9,40.6L643.1,24L333.9,93.8L0.1,1H0v99h1000V1"></path> </svg> </section> <hr> <section id="area1"> <svg viewBox="0 0 100 25"> <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path> <path fill="#ffffff" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path> </svg> </section> </div> </div>

#area1{ height: 400px; background: #000; margin: 0; position: relative; } #area1 svg{ position: absolute; bottom: 0; }