Как сделать переход двух бэкграундов?

Question

[Кирилл Орлов]

В общем суть такая, начинаю разбираться в тонкостях веб-разработки и на одном макете встретил такой переход в меню -


весь день пробовал через transform: skew + border-radius, но заполнить пробелы так и не удалось .
Не хотелось бы применять абсолютное позиционирование, до другого потому что я не додумался (
Заранее спасибо

Answer 1

[Максим]

https://ru.stackoverflow.com/q/1072628/308951 куча ответов

Comments

[Роман Троицкий]

какой-то учебный макет, что ли?) 1в1 дизайн

[Кирилл Орлов]

да, просто в гугле вводишь - "Макеты для верстки" и для начинающих там я думаю одни и те же макеты выводятся =)

Answer 2

[Леонид Роженцев]

Можно отрисовать фон в векторе (svg) и вставить как background-image. Только для мобильной версии придётся отрисовать отдельно.

Comments

[Ankhena]

Только для мобильной версии придётся отрисовать отдельно.

Зачем?

[Леонид Роженцев]

Ну потому что svg картинку на мой взгляд труднее красиво адаптировать.

[Ankhena]

Леонид Роженцев, зачем ее адаптировать? )))
На мобилках скорее всего вообще будет одноцветный фон (только градиент).
А если нет, то и этот крошечный кусочек SVG в сто точечек останется прежним.

Но, конечно, кто же знает что там в макете для мобилок.