How can i create layout like this

1

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

v3_02
v3_021920×366 45.2 KB

2

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.

3

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

4

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.

5

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

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

1 Like
6

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

Something like

background: 
    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.

2 Likes