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

[Mark]

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

[David]

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.

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

[David]

Awesome – glad to hear that

[Author]

Posts