Custom shapes - in need of advice

[Vera_Westenberg]

Hi there!

I’m currently building a site with custom shapes as dividers. I cant seem to figure out how to go about creating it.

I’ve tried creating images out of it, but then I don’t have any responsiveness.
I’ve tried creating clipping masks, but haven’t quite figured out how that would work in this case.
I’ve thought of creating more div blocks and create rounded corners but not sure yet if that could work and stay responsive.

Anyway, help would be very appreciated so thanks in advance!

---

Here is my site Read-Only: [LINK]

See images below what i’m aiming for:

[Stan (justAnotherDeveloper)]

hi @Vera_Westenberg there is many ways how to, I have done now one simple example using SVG Mask you have something to start with.

[Schuschi_Eyes (Martin S.)]

Like @Stan points out, there are many different ways how you can achieve this.

I would probably do it by creating multiple Divs and use border-radius to create the rounded shapes.
This allows responsiveness and you can change the border-radius for different breakpoints.

I copied the CodePen of @Stan and edited it to show what I mean.

[Stan (justAnotherDeveloper)]

@Schuschi_Eyes here is your version a bit simplified but still space for improvement like set color automatically on nth-child etc.

[Schuschi_Eyes (Martin S.)]

Even better… thanks for simplifying my code!