Curved/Custom DIV Shape Tutorial - CSS & SVG 

This channel should be awarded as best channel in web development category. Thank you so much for your kind help!

Great that you also mention the tools you use! To make it perfect, link to the tools in the description. 👍

That looks so wavy!! Great project!!

I always wondered how it could be done. Thanks pal. It worked like charm

Thanks so much for the tutorial! You made it easy! It was a bit tough figuring out in bootstrap

Your channel is superb! Just continue on this way! Thanks for the video.

Wow, I had to re-watch your video like 3 times to be able to grasp it and correct my bugs. But in the end I did it! Thank you so much!!! This is a really useful skill.

Thank you for this video! It's very useful and straight to the point 👍

Great tutorial👍🏻 straight to the point

thank you very much, love from nigeria, have been looking for this

I had the issue with the line in the past. Glad you found a solution! Thank you so much!

Thank you so much for this design. This design will be part of my new web page design...

You are the man! I've been trying to do this correctly for a while. Thanks!!

This helped me so much. Thankyou!

Thank you so much! This works as a dream

it seems like "Now i am the web developer" yeah and credit goes to you thank bro

Thank you dude! I have been searching for this for ages!!👍👍👍

Thanks a milli needed this!

love your channel bro from INDIA

thank you so much, this is really helping and easy to understand

This is really helpful. Thanks for sharing.

That was awesome !!.. thank you for this great tutorial..!!

Wow! This Is A Great Educative Video

Thank you very much for this video, looking for this solution.

Cool, i will use it on my next project! Thanks a lot.

Very helpful! Thank you so much!!

What do you think would be the best way to draw a donut shaped div? Like an element that has all the properties of a normal div e.g. hoverable and can have eventlisteners added to it?

You are simply great...💛

Thank you! This is so awesome

It looks sooo cool! :)

very good, continue...

Gotta say it... thank you VERY MUCH!

Thanks so much for the tutorial.

excelent!! thanks you for the content :D

Thanks so much!!it really helped me!! :))

Thank you #RedStapler!😘

Gud bro very informative tutorial.. love you

Thanks a lot for posting this video

Smart approach! With your method! Could I add also gradient curved shape?

Thank you, thank you, thank you!!!

Thankyou so much bro it help me alot

Amazing video never knew how this was done, now I know!

Good work keep it up!! :)

This is so easy to understand thank you!

bro this is gold

Hi, when i run the source code provided in the description, only half of content can be seen, the bottom curve overflows and hidden as you put overflow:hidden. if i set auto then i have to scroll to bottom to see the full content. The whole content is not taking the browser's height How can i solve this?

thank you so much for this video

Thank you for this. Can the white part be removed?

Thank you so much!

what's ur mic name or link of buying it plz and thanks for this awesome tutorial

Wau, la verdad es que si me ayudo mucho, Thanks

Thank you so much

I've changed the height of the div curved, but the svg block stay still, it doesn't move down to the end of the div and it makes a HUGE bottom line, can you help me?

Which website did you use for creating that svg

cannot remove white space around svg. This issue is only visible on mobile. svg display is set to block, margin:0. What else could be done?

thank you so much :D

Nice!

Much love

love your voice

what if I want to have a wavy design on the right side? Thanks

is there no way to put the path in css? ive been doing it in css with simple shapes, but id like to make a shield shape

Awesome

Thank you

oh, it's fun!

Wow 💯

Thanks alot..Please share the tools link in the description.

do you kno anyway that you can make a gradient as the color?

Can you also send the link for the SVG Path generator? Thank you so much.

Many thanks for this video. I have a problem with the upper curve under Firefox: i.e. the bottom line is still appearing even after changing the last viewbox value. Would you have a solution to this problem? Many thanks in advance.

Which software are u using ?

can i add more height to the gradient and how i do it

Sir there is line on the bottom of it, i did change to 320 to 319 but i still remains, please helpp

you rock

Nice effect, but to be precise div shape didn't changed. CSS clip-path could change it, but it would be spikey.

thanks

Thank you for this tutorial, what theme are you using in vs? it's just awesome and clean.

How can we do that on Shopify ?

Is there a way to import a .svg file into a tag, and apply a background-image with css?

isnt'it a white stapler of background having red.

❤😊

It's a white Stapler though...on a red backdrop.

3:38 what if this line still appears after this? :/

what program are you using?

I clicked on this video and the advertisement I got was "I'm in love with the shape of you" song 😑😑

How to reduce height if I want to?

But the stapler is white

Your stapler is definitely white

you are funny

i selled this to a customer for 100 €

OMG editing the view box is genius, I have been using hacky translate. Don't know how you found that out, I looked for ages.

there is a white line between the two svgs.. what can i do to remove it? nothing works

Thank you

thanks