Help with better technique for building a rounded/non-rectangular section

Design help General
1

Hi All,

I’ve always been stumped by rounded/swoopy sections that you see in a lot of designs (especially landing pages) the last few years and so wanted to take a stab at building something in Webflow to practice.

For reference, I’m trying to recreate this free Adobe XD mockup from here.

And here’s a screenshot of the section in question:

screenshot1
screenshot11985×1078 134 KB

So I’ve tried building it to the best of my abilities, but if you check out the staging link, you’ll see that the ‘swoop’ kind of gets cut off depending on the screen size - larger screens in particular.

My question is to see how I could better build a design like this and if you have any recommendations for how to approach it.

Thanks for any insights you can provide. If you have questions on what I’ve done so far to build it, let me know and I’ll clarify - just didn’t want to go overboard in the initial post.

Staging link: https://app-landing-cb.webflow.io/

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3

If you anchor the bg image to the bottom then set it to cover the element, it should be better:

image

4

You can also anchor it to the bottom left, to preserve most of the curve in view for smaller screens.

image

5

Thanks @vincent - it does look a bit better but now I’m concerned about zooming out on larger screens. The image doesn’t scale well. Here’s another screenshot.

screenshot2
screenshot21894×914 125 KB

Overall… is the way I’ve approached building this (adding a div below the hero section and cutting out the curve from the XD file to use it as a BG image on that div, etc) the smartest way?