shivampip/shape_divider

## shape_divider
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shapre Divider Test</title>
</head>

<style>
    body {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 100%;
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #b1 {
        background-color: blueviolet;
        position: relative;
    }

    #b2 {
        background-color: rgb(60, 240, 240);
    }

    .sd {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 120px;
        bottom: -1px;
        transform: rotate(180deg);
    }

    .shape-fill {
        fill: rgb(60, 240, 240);
    }
</style>

<body>

    <div class="box" id="b1">Hello

        <div class="sd">
            <svg data-name="Layer 1" // xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
                preserveAspectRatio="none">
                <path
                    d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
                    class="shape-fill"></path>
            </svg>
        </div>
    </div>
    <div class="box" id="b2">World</div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Shapre Divider Test</title>
	</head>

	<style>
	body {
	padding: 0;
	margin: 0;
	}

	.box {
	width: 100%;
	height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#b1 {
	background-color: blueviolet;
	position: relative;
	}

	#b2 {
	background-color: rgb(60, 240, 240);
	}

	.sd {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	}

	svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 120px;
	bottom: -1px;
	transform: rotate(180deg);
	}

	.shape-fill {
	fill: rgb(60, 240, 240);
	}
	</style>

	<body>

	<div class="box" id="b1">Hello

	<div class="sd">
	<svg data-name="Layer 1" // xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
	preserveAspectRatio="none">
	<path
	d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
	class="shape-fill"></path>
	</svg>
	</div>
	</div>
	<div class="box" id="b2">World</div>

	</body>

	</html>