Каким образом можно добавить дополнительный задний фон, чтобы сделать гладкий переход между секциями?

Question

[Rouf_P]

Здравствуйте, пишу первый раз, по-этому прошу заранее извинить за неверное формулирование вопроса.
Что можно сделать, чтобы задать дополнительный задний фон, чтобы сделать гладкий переход как на картинке?

Comments

[Rustam Bainazarov]

Clip-path вам поможет. Но поддержку смотрите со стороны браузеров.

Answer 1

[Erl]

https://codepen.io/kaparov/pen/xvVRgP

Comments

[Rustam Bainazarov]

[Erl]

Рустам Байназаров, https://codepen.io/kaparov/pen/xvVRgP

[Rustam Bainazarov]

Erl,

[Rustam Bainazarov]

Ну так получается просто потому, что это всё «магические цифры».

Единственно нормальный метод — это clip-path, где точно можно задать скос.

[Erl]

Рустам Байназаров, убедили
https://codepen.io/kaparov/pen/xvVRgP

[Rustam Bainazarov]

Erl, вот-вот :))

Там ещё координаты можно через calc() задавать, чтобы задавать на точное значение скос в пикселях, например. Чтобы совмещать разные секции с точностью до пикселя.

[Erl]

Рустам Байназаров, ну с этим уже сам автор разберется)

Answer 2

[Владимир]

Кучу всего перепробовал и совсем не получалось сделать так чтобы на background наложить хотя бы текстовый контент. И то не уверен насколько это нормально.
С текстом


Без текста

Answer 3

[Максим]

https://codepen.io/topicstarter/pen/ZgWKQO - так наверно, с примесью SVG