Как реализовать подобное меню на css?

Question

[Alex Ozerov]

Смотреть тут
Никак не могу придумать, как реализовать подобное меню(с прозрачным фоном). Точнее как его реализовать на чистом ксс. Используя js конечно же проще. Но, там два блока которые занимают определенную ширину в зависимости от положения svg.Никак не придумаю как бы им динамически задавать ширину. Писать код не надо, направьте на путь верный :D

Comments

[Ankhena]

Например, берете SVG (белую, с выемкой для иконки). С запасом ширину полосы.
Делаете псевдоэлемент для активной ссылки. Ему задаете фоном эту SVG.
Позиционируете абсолютом относительно всей меню, а не ссылки.
В зависимости от того какая ссылка активная (nth-child) изменяете bg position. Или left.

[Alex Ozerov]

Ankhena, это я знаю. Там получается два блока, слева и справа(пустые) от меню, они задают белый фон для неактивных элементов. Вот как считать их ширину интересно?

[Ankhena]

Alex Ozerov, они одинаковой ширины в примере.
Но можно и не считать. Можно позиционировать и относительно самой ссылки, по центру. Даже проще.

[Alex Ozerov]

Ankhena, либо я не понимаю, либо вы недопоняли меня. В зависимости от выбранного пункта меню, элементы которые задают белый фон справа и слева меняют свою ширину, если быть точнее то левому явно задается ширина(124 или 192px либо другое), правому же, как то странно выставлено flex: 1 1 0%;

[Ankhena]

Alex Ozerov, в первом же сообщении написала: делаете ширину с запасом

Answer 1

[Ankhena]

UPD:
Модифицированный вариант, разбитый на 2 псевдо. Будет работать для любой ширины ссылок


OLD
Примерно так, градиент нужно доводить до ума (это самостоятельно) или заменить на SVG