Site logo

Archived topic

Skewed container edges (slanted edges) for GenerateBlocks Containers

3 replies · Started by Mark on June 8, 2020

Viewing posts 1–4 of 4

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

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.

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....

Awesome - glad to hear that

This archived topic is closed to new replies.