HTML CSS Need help slanted menu

barryc

New Coder
Sep 4, 2019
1
0
2
Hi i am looking to build a menu like the one in the image that is also responsive, i was wondering what the best way to go about it would be, such as a using a framework, or possible css grid/flexbox slant.png
 

joe

Coder
Aug 21, 2019
42
22
8
This is interesting.

I don't think any framework will help you to do this. CSS properties like `transform`, `skew`, `clip-path` etc. can do this. Try going through documentation and demos of the those properties and see if you can achieve it.

Try laying out the menu and background element without the slants first. Once done, experiment with CSS skew :)
 
Last edited:
  • Like
Reactions: Ghost

Ghost

Active Coder
Moderator
Apr 19, 2019
337
154
43
This is interesting.

I don't think any framework will help you to do this. CSS properties like `transform`, `skew`, `clip-path` etc. can do this. Try going through documentation and demos of the those properties and see if you can achieve it.

Try laying out the menu and background element without the slants first. Once done, experiment with CSS skew :)
This is exactly what I was going to say. The only other option would be making a lot of triangles that follow the same slope, but that's extremely hard to get right on every screen size. Transform and related CSS is your best bet.

The only other way I can think of would be to use image mapping where you supply coordinates to represent every clickable region on top of an image (navbar), but this is increasingly difficult when you're plotting coordinates for non-rectangles on multiple screen sizes.