Как правильно реализовать подобный header?

Question

[sergey]

собственно интересует подобное округление?
Была мысль через border-bottom-left-radius /border-bottom-right-radius,но насколько это правильно? При этом сайт будет адаптивным.
база: jsfiddle

Answer 1

[Ivan Bogachev]

Попробовал совместить идею о border-radius, немного vw и немного overflow:hidden и получилась вот такая штуковина. На маленьких экранах (как мне кажется) лучше это закругление убрать, или что-то придумать с пунктами меню - из-за закруглений они не особо помещаются. Возможно круг в 300vw - это не очень изящно, но в остальном выглядит очень даже неплохо:
где-то 1350px:

где-то 600px:

где-то 400px:

Comments

[sergey]

очень классное решение

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/381q8chx/7/

Comments

[sergey]

все замечательно, но проблема в том что края срезаны, а должны стартовать с нуля как бы

[Ярослав Иванов]

SM: Где они срезаны ?

[Ярослав Иванов]

SM: Поправил ответ. А вообще я вам вектор дал дальше под себя подстраивайте.

[sergey]

Ярослав Иванов: сейчас ок, в первом варианте были срезаны

Answer 3

[Рюрик Ростиславич]

Это нормально и адаптивно. Все лучше чем через кучу js'a