How Do I recreate this in Webflow?

I want to create a page that looks looks like this infographic. In particular the slanting or tilting edges to each section with the slight overlap shadow.

Is this possible in Webflow? If so instructions on how to achieve this would be much appreciated.

Thanks guys

Raj

You could do that entirely with webflo, by placing, at the end of each section, an overflowing div that you tilt with transform and give a shadow.

But in that case I would actually design a triangle with a shadow and export it in several colors in a SVG format, I will then place it at the end of each section.

You can also build only 1 SVG, add it to webflow by pasting the SVG code in the HTML widget, add a class to the sahpe in the code and control the color with custom CSS in the same HTML widget block.

1 Like

Wow, firstly Vincent, that was a quick response. Thanks for that.

The only thing is Vincent I am no coder and have no idea how I would carry out your instructions in Webflow. Very new to Webflow too.

I can create the SVG’s that’s no problem. I would love to see some screen shots of how to stack them on top of each other in Weblow - I know I’m asking a lot here but any help would be much appreciated.

@vincent - I have managed to get this far http://infographics.webflow.io/

don’t know how to get the svg’s to stretch to full width

Can you help?

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

Here is the project’s link as requested @Vincent https://preview.webflow.com/preview/infographics?preview=4c7b77e04940e1da56375e71f4137792

Thanks in advance

Hi, I see them full width, did you figured ot out?

Yes I just figured it out sort of.

I added 100 VW to the background image width to get the tilted images to stretch the full width of the screen.

However, if you look at it in the other screen sizes the height stays the same and the white space between each tilted image gets wider and wider. Haven’t figured this out yet.

Could you help with this?

Cheers

Ok, you should start by building your page with the content. Just do what you want, the colored sections with the appropriate background color. Once this done, the element must be absolute-positionned to the bottom, this should be simple and work.

The bottom of your graphical element should be flat, not oblique. The principle is this one: you will place an orange triangle at the bottom of the blue section, and it will melt with the following orange section… and repeat. Does this make sense?

Yes that makes perfect sense. I can visualize how that would work better.

I basically want to recreate the infographic which I originally linked to but with my own content. So shall I first create the 8 colored slanting sections?

Then what is the best way to add my content? (My content will have an image on the left, text in the middle then a “#1” position no. on the right just like in the infographic.)

Your structure should be as follow:

http://vincent.polenordstudio.fr/snap/qfjyo.jpg

and the triangle element should be in the section, after the container, and positionned to the bottom.

Hi @vincent

This is as far as I can get:-

https://preview.webflow.com/preview/infographics?preview=4c7b77e04940e1da56375e71f4137792

As you can see there is white gaps appearing on the ends of the tilted sections. Would I be right in assuming this is not going to be fixable because a tilted edge like that will not fit properly as it is stretched out to fit 100% of screen width? Or have I missed something in the configurations?

Put blue background in the orange div, and so on… this is how it’s supposed to work. Then you can have whatever enormous gap, it will be blue and fade with the blue triangle… and so on for every color. i made the blue different here for you to see but you of course match all the colors of the triangles.

http://vincent.polenordstudio.fr/snap/gakct.jpg

In the end your shapes should be only triangles and the element that contain them shouldn’t have a height value. they should all be 100% height and fit their content. Content would mostly be on color backgroudn and triangles only at end of div for the separation.

Ok I think I have got it now. Followed your instruction about the background color. This seems to work.

I didn’t understand the bit about the elements that contain the shapes should be 100% height. Doing this makes each colored section “taller” than I require. I have set them at 250px height as this seems to be enough for the content that will go there.

@vincent If you take a look at the page now I have added the content sections in.

Now how do I get the content to scale along with the screen sizes?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.