CSS Menu on Diagonal

[d3rson]

I am developing a layout of a mobile application, which will be developed in IONIC, the client sent us an example of how like he want the menu of the application, as you can see in the link below:

https://dribbble.com/shots/1701001-GIF-Exercise (Forget about the animations…)

Could you give me an idea how to get this result, from the diagonal menu, picking up the whole screen of the cell phone and keep the menu itens inside their colors?

I go stuck with this: https://codepen.io/d3rsonbr/pen/QQmrdb

[Praveen_softscripts]

Hi,

You can achieve this using clip-path and “transform” skew.
As you know “clip-path” is not supported in some browsers so you can use “Skew” for this one.

[Author]

Posts