Archived topic
Skewed container edges (slanted edges) for GenerateBlocks Containers
3 replies · Started by Mark on June 8, 2020
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