Как верстать изогнутые секции?

Question

[Dmitry_Vladimirson]

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

Comments

[Антон Литвиненко]

дизайнеры постепенно сходят с ума, имхо

[Олег]

Антон Литвиненко, Такое любители ваять полиграфически(порнографические) рисовалы. Несколько раз видел вопросы по поводу необходимости знания html, css вебдизайнерам. Вот ответ.

[Антон Литвиненко]

Олег, угу, я их называю иллюстраторами. Самое печальное, что ничему не учатся, сколько не обьясняй и не ругайся. Более того, считают себя главнее верстальщика

[Ankhena]

SVG и отрицательные margin.
У SVG есть preserveAspectRatio для нарушения пропорций.
Можно масками или clip-path.

Answer 1

[RAX7]

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

Comments

[Dmitry_Vladimirson]

Как ты построил такие точные svg? Это ты сам или есть какой-то конструктор?

[RAX7]

Dmitry_Vladimirson, Adobe Illustrator либо любой другой векторный редактор.

[xmoonlight]

RAX7, Респект!

[Ankhena]

Я так и надеялась на вашу "нелень", даже позвать хотела, но решила, что неловко :)

[Hamster726]

Это 10. Спасибо)

[RAX7]

Ankhena, мне всегда лень, но приходится с не бороться =) так что зовите, если что.

Answer 2

[Danila534]

Никак...
На данном скриншоте background сайта, такие изогнутые "секции" сделать вполне невозможно... Конечно можешь поиграться с border-radius , но смысла от этого не будет.

Answer 3

[Rerurk]

Постой верстокой тут видимо никак. Хотя можно поиграться с svg внутри div

Answer 4

[Lector]

Либо фоном, либо SVG, либо clip-path, но лучше всего дать втык дизайнеру!!! Потому как рисуют на отъебись, абы красиво и бесполезно доказывать, что это не просто. Вернее очень просто, если не брать в счет адаптивность и кроссбраузерность ) Но кому такая верстка нужна!