Streaming live at 10am (PST)

Diagonal background for menu


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

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!


#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 (:


#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


#7

Same, i use this for this section

On this site

http://lovela.fr


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


#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


#13