Как правильно сверстать угловатый фон?

Question

[Semmy_99]

Ребят, подскажите пожалуйста как сверстать такие угловые фоны ?Макет лендинга и постоянно идет какой то фон секции "наезжающий на другой.

Answer 1

[Сергей Горячев]

Вот иногда, смотря на такие работы, хочется расстрелять дизайнеров.
Не думаю, что найдется кроссбраузерное и адаптивное решение на чистом css.
Можно поиграться с SVG, но придется сильно заморочиться над адаптивностью.
Я бы делал картинками. Так будет удобней всего.

Comments

[Ivan Stroykin]

Такие дизайнеры обычно не понимают как это всё верстается. В общем, на расстрел! Всё же картинками не есть Good. Лучше отставить в сторону старые браузеры и воспользоваться css3 возможностями. Ну, как всегда, ИМХО :)

[Semmy_99]

Иван Стройкин: А какими именно возможностями ? Подскажите хотя бы логику действий ддейтсвий

[Сергей Горячев]

Иван Стройкин: Ну, не всё, конечно картинками.
Тут часть элементов нормально верстается обычнми псевдоэлементами.
Картинкой тут только нижний блок, где обрезанная картинка.
Вот чтобы обрезать ее так, нужно применять svg, это и есть гемор.
А с остальным проблем не вижу)

[Ivan Stroykin]

Semmy_99: Думаю для просто понимания будет достаточно, а дальше уже можете по аналогии собрать запрос для нашего друга, Google. https://habrahabr.ru/post/126207/

[Сергей Горячев]

Semmy_99: вот как делаются такие треугольники apps.eky.hk/css-triangle-generator
Но на нижнем блоке это не реализовать, из-за переходящего фона, там придется либо картинкой, либо как-то иначе)

[Ankhena]

Semmy_99: для реализации нижнего блока можно попробовать накладывать несколько фонов. Вниз "завитки", на них 2 белых "треугольника" с помощью градиентов.

[Semmy_99]

В общем оказалось, что бы достичь такого эффекта необходимо использовать clip-path

[Сергей Горячев]

Semmy_99: ну, если ты учёл, что он еле-еле работает в браузерах и не работает в ие, то да, можно и его. Я же писал сразу, кроссбраузерного варианта нет. А клип-пач я редко использую,

[Semmy_99]

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

[Сергей Горячев]

Semmy_99: Кстати, нашел в своих старых записях такой вариант - https://jsfiddle.net/snewrjjr/ - если интересно, как сделать черный треугольник, адаптивно и красиво. Насколько я помню, он везде работает. Ну, просто для общей информации))

Answer 2

[Александр Шемаханов]

Попробуйте ещё покопать в сторону
transform: skew

Answer 3

[Артем Менченя]

Вот тут на CodePan я выкладывал, как сделать блок с треугольным основанием - может быть будет полезно.