Diagonal background for menu

Design help General
1

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.

1000×800 19.5 KB

Thank you for your answers :smile:

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

Edit: I forgot to upload the image :sweat_smile:

2

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:

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

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

1 Like
3

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

4

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

1 Like
5

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

6

It did this for my portfolio site. look at the top right:
https://preview.webflow.com/preview/nabalos?preview=1a9c3c8e33d64c4d170f399de33f5195

1 Like
7

Same, i use this for this section

http://vincent.polenordstudio.fr/snap/np1vn.jpg

On this site

8

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

9

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…

1056×759 283 KB

2 Likes
10

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

Thank you any ways

11

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!

12

This is how I built it

Page > Diagonal Sections

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2