-
Posts
-
Hey everyone,
I’m currently working on a website and we would like to create a section that looks something like this: click here. I think diagonal color sections will do the trick, hence the post title, but I’ve never really used them before and before I embark on a journey of a trial and error only to find out what I’m trying to do isn’t possible, I figured I’d ask for some feedback first.
To give you a better and maybe clearer idea of what this would look like in a live website, I’ve made some adjustments on of the enfold demo websites: see here
1. Are diagonal color sections the right way to approach this?
2. If they’re not, what would you recommend instead?Thank you!
Hi,
Thank you for your patience, I don’t believe that you can create this complex layout with the diagonal color sections, I recommend adding a background image to the color section with the diagonal white area in the background image
Best regards,
Mikeyou can manage it by clip-path.
But the following section had to be handled the same way on top of that section
see ( css code including ): https://enfold.webers-webdesign.de/enfold-one-page-agency/the shift of that edge you like to have – had to be the same value on both sections! so % will not be ok ( the % is in relation to the section height – and that maybe different for both sections) for the shift. It had to be a absolute value – or a relative value that is the same for both sections ( f.e. screen width)
now only the polygone points declare the form of your separator. The points coordinates are starting top left and goes clockwise.
see f.e. : Clippy__________
to explain what I mean by shift: Starting from a rectangular polygon with an additional point at the bottom, in the example I move this point upwards by an amount (10vw). This means that the y-coordinate is 100% – 10vw. The same goes for the bottom left point.
So that there is no gap, I have to do the same with the following section. But then for the first and second point of the polygon.
But this mockup : https://i.gyazo.com/9aa08ac46047a586058391b52466bdf8.jpg
will need more css. I think it could be reached by grid layout …
- You must be logged in to reply to this topic.