Как сделать сложную верстку двух секций на landing Page?

Question

[koscsshtml]

Добрый день, прошу прощения за глупые вопросы, сидел дел верстку, тут прям ступор и все.
Суть в чем. Необходимо сделать две секции такие вот -

Сделал фон вот так вот

.bg {
-webkit-clip-path: polygon(100% 5%, 100% 78%, 0 63%, 0 31%);
clip-path: polygon(100% 5%, 100% 78%, 0 63%, 0 31%);
}

Отдельным блоком задаю фото, но увы оно обрезается как и фон, как-то можно сверстать это красиво?

Comments

[yarovikov]

Рчевидно, что чувака вырезать с фона в фотошопе, либо картинка в png с обрезанными краями

[Виталий Першин]

Фото вставить в отдельный контейнер и поместить его поверх фона. Контейнер с фото сделать выше, чтобы не обрезать фото сверху, а снизу сделать обрезку такую же как и на фоне.

[koscsshtml]

Виталий, Первая попытка была именно такой. Но при адаптации снизу границы перестают совпадать.

[Виталий Першин]

koscsshtml, Скорее всего потому что вы задавали угол в процентах и при разной высоте элементов угол становился разный.

Answer 1

[ⓒⓢⓢ]

например, можно так, но не очень гибко получилось:
https://codepen.io/anon/pen/PLgwPO

Comments

[koscsshtml]

А как-то возможно сделать на 100% ширину?
В обще, я пробовал с position поиграться, блок на блок, но очень уж топорно выходит?