Снова вопрос по меню с косыми линиями(параллеограмм), как реализовать такой эффект с помощью псевдоэлементов?

Question

[Алексей Непомнящий]

Всем доброго вечера, заранее извиняюсь за вопрос, поиск как по гуглу, так и по сайту ничего дельного не дал(.
Необходимо реализовать меню с косыми линиями при наведении (параллеограмм) и сделать это нужно с помощью псевдоэлементов, а для первого и последнего пункта нужен с одного края прямой угол(как на скрине)



п.с. overflow: hidden при skew - не катит, так же как и заливка фоном... необходимо именно реализовать с помощью :before и :after.

https://codepen.io/Samokhin/pen/GRRoXZj

спасибо за помощь.

Answer 1

[Samuello]

https://bennettfeely.com/clippy/

Comments

[Алексей Непомнящий]

спасибо за помощь!

Answer 2

[Макс]

https://codepen.io/Smiky/pen/dyyGqQp
Еще вместо трансформации можете использовать svg с preserveAspectRatio="none" с background-size: 100% 100%; для псевдо-элементов

Comments

[Алексей Непомнящий]

спасибо за помощь!