Create Custom Shape Design using SVG and CSS​

In this  tutorial, you will learn, how to create a custom shape div using SVG and CSS in just a few minutes.

HTML Code

At first, I’m going to create a div and assign a class to it. Then put some headline and paragraph. To create the shape of our div, we’ll need to use SVG path from https://getwaves.io/ use SVG on upper div and lower div.

Below is HTML file Code.

<div class="upper-curve"></div>
    <div class="container">
        <h1>Welcome To Acode</h1>
        <p>Today we are going to learn, How to make curved shape div using svg and css. Lets get Started. Thank You !!</p>
    </div>
<div class="lower-curve"></div> 

CSS Code

Center align your content and give background color.

Style your header and paragraph as per your requirement.

Now give a background color to your bottom section (here lower-curve class) .

Don’t forget to use the Display Block CSS property for SVG.

Below is CSS file Code. 

.container {
text-align: center;
background-color: #00587a;
font-family: sans-serif;
color: #fff;
}
.container h1 {
font-size: 4em;
}
.container p {
font-size: 2em;
margin: 0 2em;
}
.lower-curve svg {
background-color: #00587a;
}
.upper-curve svg {
display: block;
} 

Watch Below Video for Detail Understanding