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.
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.
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.
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.
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.)
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.
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.