[Resolved] Skewed container edges (slanted edges) for GenerateBlocks Containers

Home Forums Support Skewed container edges (slanted edges) for GenerateBlocks Containers

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1319981
    Mark

    Is there a quick-n-easy CSS solution to give GB containers with background colors and/or gradients a slanted edge?

    #1320276
    David
    Staff
    Customer Support

    Hi there,

    simple way with Gradients.
    Add your Background image ( if required ) and check Background Color Overlay.
    Go to Background Gradient and check Use Gradient .

    Gradient color 1 set the opacity to 0. So its fully transparent.
    And set a solid color for gradient 2.

    For both colors set the Stop Position % to the same value. eg. 80%.

    Now change the direction to position the ‘gradient’ and angle.

    #1320370
    Mark

    Thanks David, that kinda works, but gives a jagged slant that does not fully cover full-width containers.

    I ended up using a jagged SVG (just 2 lines of text actually) to make a much more dramatic edge. I put it into a Custom HTML block at the bottom of the container and gave it a negative margin-bottom to pull it down onto the bottom of the container, and 120% width to make it push over the container padding. Looks great.

    Hope this helps someone else….

    #1320457
    David
    Staff
    Customer Support

    Awesome – glad to hear that

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