Best way to complete this complex design

[Maurice]

Hey there,

i need some help in realising the following design. I struggle with the overlapping triangles. Whats the best way to do that in webflow? And how you would do the row with the image that goes fullwidth to the right with overlapping text on the left?

---

Here is my public share link: Link

[Karl-Heinrich (Tobias)]

Hi @Maurice

Jump in Illustrator and make an image. Set it as background an image and position it absolute.
You can also take a div, give it a background color position it absolut and transform it (rotate and “squeeze” it also with rotate). The image approach is better IMHO.

For the overlapping text, you also have multiple approaches to choose from. You can do it with negative margin, absolute positioning, …
I’d recommend taking a deep dive.
And I’d recommend negative margins in your case.

Can you share an image of the next breakpoints as well? iPad and Phone? That way I could be more precise with my recommendations.

Best,
Karl-Heinrich

[Maurice]

Hi @Karl-Heinrich,

for the triangle i did already the solution with the background image. Problem here is, that the triangle now overlapping the icon row depending on size of the browser.

For the overlapping text in the second row i tried some solutions with positioning absolute, but it won´t work correctly. Maybe you can take a look at my Shared Webflow Link.

I designed it in sketch and thought that I make the mobile view in webflow, as soon as the desktop variant stands.

Best,
Maurice

[Karl-Heinrich (Tobias)]

@maurice
Well thats the price you pay for a non responsive (not mobile first) design approach.
Even if you fiddle it in a way it will look ok, webflow only overs 3 breakpoints so you will encounter problems on devices not covered.

You could make sure your content never touches X % on the left and Y% on the right side, with a max-width or a container and then have the triangles only max cover those %. But you need to add custom breakpoints.

For the overlap, I built you an example the way webflow did it, so it should work ok. Read-only

Best,
Karl-Heinrich

[Maurice]

@Karl-Heinrich,

i got a workaround for the problem. I have given the slider “position: absolute; width:100vw;”, also i have given the outer container “overflow:hidden;”. If anyone interested check out the Read-Only.

Best,

Maurice