Again, the question on the menu with oblique lines (paralleograms), how to implement such an effect using pseudo-elements?

Question

css

Good evening everyone, I apologize in advance for the question, the search both on Google and on the site did not give anything sensible (.
It is necessary to implement a menu with oblique lines on hover (paralleogram) and this must be done using pseudo-elements, and for the first and last item you need from one edge a right angle (as on the screenshot)

ps overflow: hidden with skew - does not roll, as well as filling with a background ... it is necessary to implement it with the help of :before and :after
. /Samokhin/pen/GRRoXZj
thanks for the help.

Answer 1

https://bennettfeely.com/clippy/