How to make menu items in the form of a parallelogram?

Question

css

Please tell me how to make menu items a form, as in the screenshot, and so that they can be made active. It doesn't work as a picture.

Answer 1

Use pseudo-elements and transformations.
Look at this example and you will understand everything.

Answer 2

Here is a tutorial on how to lay out various geometric shapes with CSS:
https://css-tricks.com/examples/ShapesOfCSS/
Another good link:
enjoycss.com/gallery/shapes/dN