hello and welcome to red stapler Channel in this tutorial will show you how to
easily create custom shape div using SVG and CSS in just a few minutes ready
let's check it out so first let's start with HTML structure I'm going to create
a div and assign a curved class to it then let's put some headline and text
paragraph
next to CSS I'm going to set the background and text color and text
alignment to Center
then increase the font size and set font family for aesthetic
here's our current div you will notice the space at the top because after h1
margin we'll remove that later
to create the shape of our div we will need to use SVG path there are many ways
to do this can draw it in Illustrator and export it as code or you can use
online generators for this tutorial we are going to use the latter there are
many good generators out there but there are two that I like most first is SVG
path builder by Anthony Dugois if you want to create a complex shape if this
is the one for you you can easily add and edit each point and the result code
will be right at the bottom
another one is getwaves.io you can create wave shape easily using the
random button you can also switch between curves and rectangles once you
are ready click the export button and copy the code
I'm going to place it at the end of our div
the view box property defines the size of the SVG since we are not going to set
the width and height the SVG will scale to fit so we don't have to worry about
this for now next is fill this is the color of our SVG shape we will change it
later and the last one is the most important the d property defines the
path of the SVG it should be noted that the code we copy from getwaves have the
entire SVG structure while other generator is like previous one from
Anthony only have the path and you have to write the SVG tag by yourself and
here's our div you will see if we change the fill color of the SVG to white it
will look like the div has been cut to that shape
I will also set the SVG display to block to make sure it takes up the entire width
also removed the headline top margin while adding the site for the paragraph
looks good but there is problem you'll notice a very thin line still remain
this happened in Firefox only but not in chrome we can fix that by reducing the
viewbox height by one
now we can use the same technique with the upper side of the div except this
time we will change the SVG fill color to orange while change the defect round
to white
the good thing about using SVG is scale responsively to the window size
and that's all for this tutorial if you like this video don't forget to
subscribe for more dev tips and tutorials thanks watching see you next
time bye