Making Cool Diagonal Sections With Webflow

Learn how to build Custom designed websites with Webflow:
zpr.io/gcukf
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj

[@michielvanbruggen]

That was so much easier than I thought it would be! Thanks!

[@spencerchow9296]

I used Webflow to create a triangle before. I did it with the boarder instead of rotating the div block. Following CSS Triangle generator, try something like this:
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;
and you will get a proper triangle.

[@lukedorny]

Completely agree. I also instantly thought of this as a better solution, too. 👍 However, if you wanted a gradient in the background, a different solution is needed.

[@craigthomas4565]

That is great Ran. Looking forward to seeing more of your tips using Webflow.

[@eth_fish]

Wow, so simple! Thanks for sharing

[@AdrianJDeNiz]

Thank you so much this was so helpful!

[@saraelisa8938]

Coool! That's super, thank you so much🙏🙏

[@nicolasmarquez5956]

Very Clever! I also use images to do things like that, but the rotation trick is very nice!

[@johnleighdesigns]

This is a great couple of approaches using a div or svg to get an angle - ive used a div within a single section and that div I gave some negative margin also made it absolute positioning at bottom of the section to keep it at bottom

[@gregosborne9336]

Super handy Ran! good job explaining it :)

[@Oli_Timmis]

Interesting way of doing it, I like it! I personally use SVGs, that way you can have whatever shaped/angle section divider you want!

[@audreydesaulniers5176]

how do you do that though?

[@Oli_Timmis]

@@audreydesaulniers5176 Just create an SVG shape (either using an online generator or in your preferred design software, like Figma or Adobe XD etc.). Then set this SVG as a background image in Webflow. Adjust its positioning and fit until you achieve your desired effect.

[@MORDEKAIZ]

Thank you

[@DrewEastmead]

awesome video; thank you!

[@amirboring]

Thaks man, very helpful.

[@jonb5150]

Very helpful, thanks!

[@mehdesigner4572]

Great video! You can also use Skew method that works just fine and you don't have to deal with the rectangle issue and make it 120% or something like that.

[@artaxel96]

Thanks for the great tip! After doing the diagonal divider, i tried to put content inside the 2nd section right below the divider and I couldn't understand how to adjust it that way, so it's aligned to top of the section right under the diagonal line and the actual height of the section shrinks as well. Could you help me with that please? Thanks in advance!

[@NomadCulture]

Hey my man it's a great tip, but I couldn't make it stretch, so I always just add an SVG background image.

[@akashchoudhary5736]

Instead just use a gradient background and make transition from one color to another very sharp, it will look like you have two sections with different colors !!

[@jackcannotbefound]

Couldn’t you skew the div block on its y axis to keep the width?

[@Disclosureclips01]

I thought the same but it skews bottom and top part of the div block last time i tried..

[@jackcannotbefound]

A-R-S the rotation here would make the bottom angled too though?

[@coreymoen]

Agreed, plus if you used Skew you wouldn't have to fix with a page wrapper!

[@jackcannotbefound]

Corey Moen that’s what I thought!

[@RodrigoMendoza7]

Hi Ran! I suggest you to try pseudo-elements and clip-path (it's a css property). Through pseudo-elements, you wouldn't need to create an (empty) actual element on the markup. You just do it through CSS and it behaves like a normal HTML element, therefore, you can style it as well (applying the css property I suggested to make the same diagonal effect, for instance). In this particular case, I think it's only a matter of applying that css property on the section with the gradient, that should do it.

[@lennartgastler332]

exactly what I thought :) 👍

[@Disclosureclips01]

Can u do that with the free account?

[@crarls27]

Do you mean through custom css?

[@Disclosureclips01]

crarls27 last time i checked to add custom css you have to have a paid account

[@RodrigoMendoza7]

@@crarls27 Yes. I'm not sure though if you can get to that level of CSS customization in Webflow.

[@razvacos7469]

how can be built a blog sidebar and an ecommerce sidebar with filters?

[@ramverma9675]

Which fonts did you used in your intro ?

[@polinakarasova1694]

That doesn't work since the rotated div is still visible on huge screens and covers the content on small screens

[@alexandergraham2581]

Why not an embed svg?

[@constantinross7911]

Im not familiar with web-flow but couldn't we give the overflow-x: hidden; to the body directly?

[@anujpanchal1390]

Yes it works just perfect. I have been using it. Very cool.

[@EmilVillumsen]

You can only give overflow:hidden to the body, not x or y specifically in Webflow

[@constantinross7911]

@@EmilVillumsen If it is not possible through the UI, can't you just write custom css?

[@delfs413]

im not understanding why these videos is not getting more views.

[@tonys490]

Wish there is a pen tool on webflow !

[@anirudhvktakkar]

Wouldn't a clip path be far easier?

[@tanguygall5759]

The second way doesn’t work on safari unfortunately

[@polymadsdesign6372]

@Flux Please create a guide / video on a/b testing with webflow! (maybe using google optimize or Optimizely)! :)