Interesting approach. I thought rotation the entire section was the way to achieve the diagonal effect but it required alot of effort. This is waay simpler. Thanks for sharing this tutorial !
Really nice tricks, you did well Kabarza! For the future it would be nice if you were zoomed into the browser a little bit more so that we can see the navigator more clearly when watching the video on a phone. Keep it up! 🚀🎯
I really enjoyed it, I'll train a couple times to learn it properly. Thx Edit: it's not working 😔😒 it looks very weird when I set the color to transparent.
You can actually make fun weird shapes with this technique but if you dial it the way I did, you get a rectangles. You can also find a cloneable on my webflow page and see how it's exactly dialed in. For the next time, I'll make sure to include read-only or cloneable link.
Thank you for posting! But...I have a question! I've tried this technique before, and it works! But what I needed was a triangle shaped div with a background image and...this doesn't work for that. I ended up making a triangle image in Illustrator and used that which was good enough: but it wasn't responsive, so I had to resize it for different breakpoints and make the other elements responsive instead. Am I missing something?
Update : after using it on a project, I feel this might not be the optimal way. The slant line rendering is not as smooth. I could see jagged lines on Mac. Did anyone else feel the same ?
You're awesome Fateh, definitely like this concept and didn't know it was a thing. Opens endless possibilities
I was just looking for this. Thank you very much, very valuable
Great stuff Kabarza! Thanks for sharing👍
Awesome trick @Kabarza!
Interesting approach.
I thought rotation the entire section was the way to achieve the diagonal effect but it required alot of effort.
This is waay simpler. Thanks for sharing this tutorial !
That's also a way. Using gradient but matching the lines at the same % is also another way 😉
Same.
Wow! Thanks for this pro tip! 👏👏👏
That's a really smart technique 👌
Also, absolutley love the amount of plants in the background, very chilled
Hahaha thanks man. I'm planning on getting some more
Very helpful. Thanks for sharing!
This is really helpful, and a really easy way to execute in Webflow. Thank you Kabarza!
Glad to hear that ❤️
Well done, thanks!
i love this tutorial it really increase my skills
so interesting !
Amazing!
amazing 👌
Really nice tricks, you did well Kabarza!
For the future it would be nice if you were zoomed into the browser a little bit more so that we can see the navigator more clearly when watching the video on a phone.
Keep it up! 🚀🎯
Thanks man. Really appreciate it.
And great suggestion. I'll try to zoom in a bit more.
How does one become a webflow coach @flux academy?
Fantastic video, thank you for taking the time to share 😀🙏
Thanks man.
By being in the community and applying when we expand the team I guess.
can u make a wideo on assymetric grid mergin two section together?
Hello, how do I make this work with image fill?
Heey! Love this tutorial! Awesome stuff @kabarza my man!
Thanks man. I really appreciate your support
I really enjoyed it, I'll train a couple times to learn it properly. Thx
Edit: it's not working 😔😒 it looks very weird when I set the color to transparent.
You can actually make fun weird shapes with this technique but if you dial it the way I did, you get a rectangles.
You can also find a cloneable on my webflow page and see how it's exactly dialed in.
For the next time, I'll make sure to include read-only or cloneable link.
@@Kabarza thank you very much 😊
Thank you for posting!
But...I have a question!
I've tried this technique before, and it works! But what I needed was a triangle shaped div with a background image and...this doesn't work for that. I ended up making a triangle image in Illustrator and used that which was good enough: but it wasn't responsive, so I had to resize it for different breakpoints and make the other elements responsive instead.
Am I missing something?
Unfortunately you can't add a background to this. For that I would use an SVG as background and change it based on breakpoint if necessary.
how do you write text onto the shapes?
How would I make a diamond shaped picture frame?
Make more tutorials about creative hero section designs
is that a reupload i'm seeing?
Yep, good catch! First video here :)
Borders, eh? Sneaky! Nice one.
Update : after using it on a project, I feel this might not be the optimal way.
The slant line rendering is not as smooth. I could see jagged lines on Mac.
Did anyone else feel the same ?