Feature Request: Angled Images in Split Content Block – SVG Divider left/right

[Thomas]

Thomas

November 24, 2020 at 6:25 pm

Hi guys,

I purchased the lifetime membership this week and so far my experience has been very positive.

There is one thing I would like to be able to achieve, and as a matter of fact, it is already possible.

However, I think the current implementation is not ideal. I mean angled images, as in this demo:
*Login to see link

Looking at the page source I have figured out how it was done and after a while I was able to recreate the gradient overlay part.
The issues that I have noticed:

1. The angled image edge looks jagged on my 27-inch 4k screen. Not nice.

There is a similar feature in the row layout block: SVG divider, but it’s only for the top and bottom side.
The SVG divider is super-clean, the image edge is not jagged at all, perfect.

Perhaps, CSS-gradients were not intended for such things… By definition, a gradient is a smooth transition from one color to another, so technically it’s not even a gradient. It seems a little hacky.

2. The setup is relatively complex, you need to have a wider image, and then cover a part of it. As far as I can tell, it works only with css background-image, but not with .

I think the Split Content Block would be a great place for left/right SVG dividers (triangles), in a similar way they have been implemented in the Row Layout Block (top/bottom). Simple setup, no jagged image edge – that would be really cool. Ideally, also working for and not only with css background.
Perhaps, it could work also in other blocks, maybe in the Image Overlay Block.

Cheers,
Tom