Как сверстать вот такую навигацию?

Question

[Евгений]

Вот такую навигацию нужно сверстать. Оформление в виде табов.
Активный элемент выделен белым цветом и под собой не имеет бордера.
Если второй элемент сделать активным то он должен так же не иметь под собой бордера и быть выделенным белым цветом.

Исходя из такого непростого стиля (закругления с обрамлениями) предполагаю, что есть какие то уже готовые решения или библиотеки.
Понятное дело что есть у таких библиотек как: bootstrap, materialize и т.п. табы, но они совсем не соответствуют тому дизайну что в макете и просто откамизировать 2мя движениями не получится.

Comments

[topalek]

https://getbootstrap.com/docs/4.4/components/navs/#tabs

[topalek]

https://materializecss.com/tabs.html

[topalek]

https://www.w3schools.com/howto/howto_js_tabs.asp

[Евгений]

topalek, Это совсем не то что в макете, про них я знаю.

[n1ksON]

Так вы сами задизайните, а функционал бутстрапа возьмите

Answer 1

[strelok011]

Где-то встречал комментарий - за это зарплату платят :)
Если в популярных фреймворках этого нет - значит и в менее популярных шаблонах это вряд ли встретите.
Обычный изврат дизайнера - головная боль верстака. Много аналогичного встречалось и было в работе. Псевдоэлементы, радиусы, активные табы, z-index-ы - всё богатство css к вашим услугам :)

Comments

[Евгений]

Да, вот я про то же. Буду разбираться, спасибо.