Streaming live at 10am (PST)

Diagonal background for menu


Hey guys,

at first... I'm new here, just want to say hello smile
Hope you can forgive me the one or other question which maybe was asked a few times by other users. I couldn't find an answer. Sorry also for my bad english, I'm from germany and it was never my strong point.

Let's start with the problem.
Is it possible to create a menu with a diagonal background (only code / without using an image)?
I tried it for a while now, but I can't find the right way. (How) Does it work?

Guess you'll understand what I mean, if you check the attached image.

Thank you for your answers smile

Best wishes (from the Weißwurstäquator smiley )

Edit: I forgot to upload the image sweat_smile


Hallo! Wie gehts?
You are going to use Skew to get that effect. Skew is not native in Webflow (yet!?) so you have to go to Custom Code --> Head Code and put this in:

.class-name-of-the-element-you-want-to-affect {
-webkit-transform: skew(0deg, -10deg); /* Chrome, Safari, Opera */    
transform: skew(0deg, -10deg);

Then all you need is to play around with the angle!


@StevenP - awesomeness. I recently used a png for angled edges on a site as i wasn't familiar with the CSS to create it manually. I can go back & do it properly - THANKS!


It's also possible to use big DIVs and rotate them within Webflow UI (:


Yeah, the method of @vincent is better because you get more direct visual control!


It did this for my portfolio site. look at the top right:


Same, i use this for this section

On this site


Hey @PixelGeek! Looks like you might have a broken link here :wink:


Hi all! You can also do this with a 'tight' gradient with one side set to transparent - then just set the angle and position you want...


The line doesn't seems to be crisp but pixelated though :disappointed:

Thank you any ways


You're right! ...but that's just the angle I picked - It's crisp at 45 degrees, etc... But you are right, it is pixelated on funny angles! Regards!


This is how I built it

Page > Diagonal Sections

closed #13