Как оформить активный пункт меню на CSS?

Question

[Andrey M.]

Есть пример:

Абсолютом я опустил пункт меню, border-bottom-ми дал линии у самого меню и пункта меню, но уперся в тени.
Как их делать: через before и after или просто отрезать нижний кусок и приставить через befor?

Или есть другой способ?

Comments

[Ankhena]

Не понятно, зачем абсолютом, когда достаточно relative или transform или margin для остальных. Если знать, как выглядят неактивные можно было бы подробнее.

Треугольники - да это псевдоэлементы.

И не уверена на счет border-bottom ccc - это скорее часть градиента.

[Andrey M.]

Ankhena, Спасибо за попытку помочь! Но не всё так просто.

Answer 1

[Andrey M.]

Действительно, transform: perspective(50px) rotateX(-25deg); дает возможность сделать тень, но что-то она у меня не прячется.

Не пряталась. Повесил псевдо-элементы абсолютами, в которых вся графика, и заработало. Градиент, правда, подбирать запарился, а так норм.

Answer 2

[maratakbutin]

Вот похожий вопрос с готовым кодом → Как создать подобную закладку?

Comments

[Andrey M.]

Спасибо, действительно похоже.