Diagonal Section Separators

[finixdesigner]

Hello fellow big brains!

Looking to create some slick diagonal section breaks for my landing pages and was wondering if anyone has ever built this before. I'd image someone here has! I started taking a stab at this myself but figure I'd reach out the the community first to see what's out there . Below, I've provided a screenshot of what i'm trying to achieve and a little JSFiddle of what I had begun working on. Couldnt find a post about this topic so any help would be appericated. Thanks!

JS Fiddle
https://jsfiddle.net/coreythedesigner/hxyfc79L/

Example:

[prosa · Accepted solution]

The fastest way to do this is using an svg to create the path to clip your background.

you can try using this tool. 

http://www.cssplant.com/clip-path-generator

[Kevin-C · Accepted solution]

Hey @finixdesigner  and thank you @sharonlicari 

Age old request here, which means there are quite a few ways to go about this. And the best solution is dependent on your implementation and current sight structure. How do you find out which is best? Well try a few and see what you feel most comfortanle with.

Below I've found a few tutorial on achieving this effect:

A few options from the people at CSS Tricks

Skewing / Rotating the entire container and its contents

[prosa · Accepted solution]

The fastest way to do this is using an svg to create the path to clip your background.

you can try using this tool. 

http://www.cssplant.com/clip-path-generator

[sharonlicari]

Hey @finixdesigner  

Thank you for sharing all this information, this will help the experts I will tag so they will be able to advise you.  

Hey, @DaniellePeters @Kevin-C @Anonymous  could you please share your knowledge with @finixdesigner ?     

Thank you

Sharon