Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

barryc

New Coder
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/flexboxslant.png
 
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:
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.
 

Buy us a coffee!

Back
Top Bottom