Curved/Custom DIV Shape Tutorial - CSS & SVG

How to create curved and custom DIV shape (responsive) using HTML/CSS and SVG path
Source Code: redstapler.co/curved-custom-s...
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#CSS #SVG #WebDesign

[@Pankaj-Verma-]

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

[@FirdavsiWebDev]

That looks so wavy!! Great project!!

[@alianwar2857]

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

[@lizalizaveta1882]

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.

[@aan8123]

bro please tell my how to increase the width of svg of get waves

[@fabrizioamelotti7922]

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

[@jenstornell]

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

[@TroyboyTv]

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

[@dolapoajayi2156]

hi..does a line appear when you switch to mobile view?

[@mark_pherz]

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

[@XxMrBryanxX]

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

[@adamprogrammertech6116]

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

[@abustosp]

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

[@RedStapler_channel]

not the cleanest solution but it works! :)

[@anshumangupta1422]

@@RedStapler_channel Any better solution??

[@cristianmetz9470]

Thanks a milli needed this!

[@karimullahkhan8354]

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

[@user-zu6gk3zw4s]

Tolly agree with you :)

[@Pankaj-Verma-]

Channel is great indeed.

[@RaviKumar-lp9zd]

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

[@remixowlz]

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

[@RedStapler_channel]

glad you like it. you could help support us to make more tutorials by sharing it to your friends :)

[@remixowlz]

@@RedStapler_channel yes thank you!👍

[@jasthakker648]

Great tutorial👍🏻 straight to the point

[@hannahwhitham3539]

This helped me so much. Thankyou!

[@chowooizy1348]

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

[@shreyjain3562]

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

[@PeterFelis]

Thank you so much! This works as a dream

[@An-yh2bl]

It looks sooo cool! :)

[@msvmanikantasrivishnu7788]

You are simply great...💛

[@romimaximus]

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

[@johnnybravo34]

love your channel bro from INDIA

[@messedup7877]

Wow! This Is A Great Educative Video

[@yousrname]

This is really helpful. Thanks for sharing.

[@MeggynQa88]

Thank you! This is so awesome

[@chewingwildflower]

Very helpful! Thank you so much!!

[@arielzelayasv]

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

[@Rafael-Bravo]

Gotta say it... thank you VERY MUCH!

[@chakabani123taftouf7]

very good, continue...

[@priyaranjan1733]

Thank you #RedStapler!😘

[@syberiaok]

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

[@gerardosilva8221]

excelent!! thanks you for the content :D

[@GivanildoOliveira86]

Thank you, thank you, thank you!!!

[@abhaykumargupta4217]

Thanks so much for the tutorial.

[@nanthuarumugam]

Thanks a lot for posting this video

[@jabransaeed6155]

bro this is gold

[@Allinone-ll7ms]

Gud bro very informative tutorial.. love you

[@wgm247]

Good work keep it up!! :)

[@MohsinKhan-rj6ll]

Thankyou so much bro it help me alot

[@alanrush1381]

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?

[@rdz1319]

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

[@tobijudah]

thank you so much for this video

[@JaberAhmed4770]

Thank you so much!

[@sanaeareina5371]

Thank you so much

[@dfcw]

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

[@rossthemusicandguitarteacher]

Much love

[@welt101]

Nice!

[@darioantonioli576]

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

[@mertma52]

thank you so much :D

[@craiggazimbi]

Thank you

[@jamesdavis4071]

oh, it's fun!

[@mahakal76]

love your voice

[@bharathirv8479]

Awesome

[@MarkOhanesian]

This is so easy to understand thank you!

[@penge.shanghai]

Wow 💯

[@tarikulislambhuiyan8938]

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?

[@alirezak5870]

you rock

[@anaturuchii1389]

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

[@DevCoder]

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

[@ndehngwa910]

thanks

[@hazhohuman]

what about the external SVG files, to be used as clip-path of the elements while the size of the element unknown and still the SVG applied as clip-path, to be in the boundaries of the elements applied on

[@DeepShahmusic]

Which website did you use for creating that svg

[@user-eo3bs3dz3f]

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

[@diveruzumaki5556]

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

[@YouGG]

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?

[@clockshield]

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

[@kinglytical]

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

[@nikoman71326]

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?

[@ibadshaikh2215]

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

[@aadhavanav7160]

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

[@mateuszabramek7015]

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

[@RedStapler_channel]

the problem with clip-path is it also clip the content, making it difficult to design :(

[@mateuszabramek7015]

@@RedStapler_channel let's say user have to click something, just beyond edge of this svg shape - how would you do that? pointer-events:none for whole div? Edit: I had to make once nav menu of such fancy shape, if I remember well I've made it frome pure svg, no div.

[@ThatGuy-xu8ml]

Which software are u using ?

[@geoffreycoste1792]

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.

[@goofy7791]

Did you put your svg as "display: block"? I was having the same problem, but it was because I forgot about the display.

[@rawrsophiex]

@@goofy7791 youre the bESTTTT

[@ridwanullahisuleiman6423]

❤😊

[@jos3008]

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

[@mostafamahmud378]

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

[@RedStapler_channel]

default theme. I just increased the font size.

[@mostafamahmud378]

@@RedStapler_channel Thank you and keep teach us;)

[@luckybairagi7294]

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

[@salinabail4295]

How can we do that on Shopify ?

[@kaerit8453]

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

[@samuelmatheson9655]

Yes

[@samuelmatheson9655]

just use src="kaerits file.svg"

[@kaerit8453]

@@samuelmatheson9655 thanks i'll try it

[@user-vd1wk5tu1w]

isnt'it a white stapler of background having red.

[@sondejqka7590]

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

[@proteus1]

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

[@manjunathjadhav3062]

How to reduce height if I want to?

[@RedStapler_channel]

set new height when generating svg

[@geofdevore]

what program are you using?

[@RedStapler_channel]

vscode

[@geofdevore]

Thank you

[@urbangaming7334]

But the stapler is white

[@flokissn9987]

you are funny

[@blaaaaaTWATaaaaaaab]

Your stapler is definitely white

[@dermenschistweilesglaubtda41]

i selled this to a customer for 100 €

[@inputandprint7962]

Thank you

[@OmarAli-mc7ri]

thanks

[@Robert-gr1cl]

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