Как сверстать вот такое вот меню адаптивно?

Question

[myaca]

Нашел макетик, хочу сверстать, но не понимаю как сделать правильно.

Есть такая менюшка.
i.imgur.com/Buvp9E5.png

Все это разбирается вот так:
i.imgur.com/MJA1TRA.png

Собственно, я склеил большую окружность, белую линию и лого в одну картинку.

Ссылки навигации положил просто в nav>ul, а тень под белой линией хочу сделать просто через inner shadow у ul.

Не знаю как спозиционировать, как сделать чтобы все это счастье было адаптивным.

Прошу подсказать хм, алгоритм, что-ли, как делали бы вы?

Answer 1

[Adikjoro]

Набросал адаптивный вид под размеры смартфонов(320px).
Но я бы посоветовал наверстать через SVG все эти формы над меню, чем изображениями выставлять. Так легче менять формы под разные экраны.
Если SVG интересует, могу завтра показать пример.

Comments

[myaca]

Спасибо за совет, я посмотрю сам в этом направлении дальше, не подумал сразу.
если не затруднит - покажите, пожалуйста

[Adikjoro]

myaca: На резиновый дизайн не стал потеть, задал как прошлый раз адаптивный дизайн под размер мобилы. Ссылка. SVG-фигуры в ручную создавать слишком долго, поэтому нарисовал в Adobe Illustrator, правда, больше мусора стало и довольно криво, но для вникания этого достаточно)) Если изучишь SVG, то научишься динамически менять фигуры, например, изменять ширину арки, не теряя толщину и т.д.

[Adikjoro]

myaca: Здесь я примеры приводил по SVG и ссылку на курсы по основам.

[myaca]

Adikjoro: Спасибо большое за подробный ответ! Вы прямо на все вопросы ответили сразу. Хотел спросить как вы нарисовали быстро это, я думал чем-то вроде Inkscape... Еще раз, спасибо большое за все ссылки на codepen и на курс по SVG. Спасибо за помощь)

Answer 2

[Артур Карапетян]

мб, нужно делать все эти элементы псевдоэлементами для меню?