[Resolved] Inverted border radius for container on a page hero element?

Home Forums Support [Resolved] Inverted border radius for container on a page hero element?

Home Forums Support Inverted border radius for container on a page hero element?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2381362
    William

    Hi there.

    In what way is it possible to add an inverted border-radius (see the red lines) to a container in a GP hero element?

    Many thanks,

    Will

    #2381482
    David
    Staff
    Customer Support

    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 ?

    #2381498
    William

    Hi David,

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

    Kind regards,

    Will

    #2381588
    Ying
    Staff
    Customer Support

    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;
    }
    #2384398
    William

    Wow that is complex but works. Amazing thank you!

    #2384533
    Ying
    Staff
    Customer Support

    Glad it works for you 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.