How can i create layout like this

How can I create the layout like this using CSS or JS?

Do you have a link to the example? I think there is a good chance that the curve is just an image, maybe an SVG.

I have to build it from scratch or customise any existing code

That’s most likely an image positioned with the wave drawn with fixed colors positioned in the right place, maybe through background-size and background-position on either the footer or the main body, adding the right padding/margin to push the content out of the way. Parhaps a PNG, hopefuly a SVG.

A more advance way to do it would be with clip-paths or CSS masking, in order to make it work whatever the background colors.

Take a look at this discussion on Stack Overflow: Wavy shape with CSS

:wavy_dash::wavy_dash::wavy_dash: :grinning:

1 Like

you can also sort of fake it with multiple CSS gradient backgrounds.

Something like

    radial-gradient(farthest-side, white 100%, transparent 100%) no-repeat right top / 50% 50px,
    radial-gradient(farthest-side, SaddleBrown 100%, transparent 100%) no-repeat left top / 50% 50px,
    linear-gradient(white 50%, SaddleBrown  50%) no-repeat right top / 50% 50px,
    linear-gradient(white 50%, SaddleBrown  50%) no-repeat left top / 100% 50px,
    SaddleBrown ;

Still needs some polishing, and will definitely never look as smooth as using an SVG or image masking.