How do I achieve this?
I would like to know a more practical approach to this type of design. Your opinion is very much appreciated. Btw, I referring to the curve on the background (It's a hero section). Ignore the arrows...
3 Replies
an svg would probably be the easiest
but you can do it with a pseudo-element and a clip-path
that's true, but you need to crop some path out of some svg definition so putting a white svg on the top of the white section is probably easier. @corizon. You can use this: https://getwaves.io/ , or as @ἔρως says, use clip-path: https://www.sarasoueidan.com/blog/css-svg-clipping/.
Get Waves – Create SVG waves for your next design
A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!
Clipping in CSS and SVG — The clip-path Property and Element
– The personal website of Sara Soueidan, inclusive design engineer
Thanks a lot @Lukáš Chylik @ἔρως I'll look the link up.