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!

1 Like

@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.

…now I can go back & do it properly - THANKS!

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

1 Like

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:

1 Like

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