toohappy
@toohappy
Люблю свекольник.

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

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

Исходя из такого непростого стиля (закругления с обрамлениями) предполагаю, что есть какие то уже готовые решения или библиотеки.
Понятное дело что есть у таких библиотек как: bootstrap, materialize и т.п. табы, но они совсем не соответствуют тому дизайну что в макете и просто откамизировать 2мя движениями не получится.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
@strelok011
Где-то встречал комментарий - за это зарплату платят :)
Если в популярных фреймворках этого нет - значит и в менее популярных шаблонах это вряд ли встретите.
Обычный изврат дизайнера - головная боль верстака. Много аналогичного встречалось и было в работе. Псевдоэлементы, радиусы, активные табы, z-index-ы - всё богатство css к вашим услугам :)
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Можно сделать с помощью clip-path. По сути это трапеция с border-radius эффектом + тень и z-index. Можно сделать и с помощью svg. Вариантов куча. Псевдоэлементы, тени, градиенты, и прочее. Но, однако, это реально какой-то привет из прошлого.

Простой пример с использованием clip-path:

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы