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.


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

Search Your Keywords
Recent Post
Post Categories