Inverted border radius for container on a page hero element?

Hi there,

simple answer - no.
complex answer - maybe yes.

See here for an example of how it could be done:

https://blog.logrocket.com/how-to-create-fancy-corners-in-css/#4invertedcorners

Do you have that hero setup as seen in that image ?

Hi David,

Hmm okay and yes I do, see it in the private information.

Kind regards,

Will

Hi Will,

It's not very easy use only CSS to achieve that.

Would you like to try the SVG shape method? I did it on my test site:
https://www.screencast.com/t/AAfXiW8Y

The first step would be adding 2 shapes to the container, one of them need to be flipped horizontally:
https://www.screencast.com/t/yAlusVp1RcmX

Then add a CSS class to the container, eg. inverted-container, then add this CSS:

.inverted-container  .gb-shape {
    max-height: 200px;
    overflow: visible;
}

.inverted-container .gb-shapes svg{
    width: 200px !important;
    min-width: unset !important;
    left: calc(100% + 100px) !important;
}

Wow that is complex but works. Amazing thank you!

Glad it works for you :)