HTML & CSS slanted menu

[barryc]

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

 

[Malcolm]

Hmm that's a great question! I have the idea of how to do this but exactly what to do no. But let's see if @Ghost knows this one!

 

[jia_111]

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 🙂

 

[Ghost]

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.