Как сделать диагональное соединение фонов в секциях?

Question

[Михаил Завалко]

Привет всем! Должно быть тупой вопрос, но все же не смог найти нормального ответа под мои условия, а может уже просто 3 ночи и пора спать))) Короче нужно соединить в секциях лендинга фоновые изображения под углом, фото приложу как должно получиться, таких секций куча и везде таким образом они должны соединяться, но что то туплю и не доходит. Сделал для каждой секции background-image в картинках png и отрицательным margin надвинул одну на другую с z-index, но не помог z-index мне тут) Может кто подскажет что дельное?! На картинках плохо видно, но это не белый фон, а узор еле видный, короче она там есть))

Answer 1

[Владислав Бойченко]

Как вариант -- добавить в секцию через псевдоэлементы (или несемантические теги) блоки и наклонить их с помощью clip-path (в ИЕ не поддерживается). Это криво, но это как вариант.
https://codepen.io/anon/pen/qPLEvz

Comments

[Михаил Завалко]

Спасибо, читал про clip-path, правда думал будет какой-нибудь более элегантный способ)) Но буду смотреть, может так и сделаю.

Answer 2

[Саша]

Mixa_007 в вашем примере можно использовать вложенность блоков.
родителя поворачиваем с помощью transform:rotate + задаем transform-origin + overflow:hidden
дочерний элемент поворачиваем в обратную сторону с помощью той же комбинации transform:rotate + transform-origin и при этом добавляем паттерн на бг.

стальные моменты это разместить на абсолюте в правильном месте.

Comments

[Михаил Завалко]

Прикольный вариант, может тоже попробовать, спасибо большое!

[Саша]

Mixa_007, не за что!)

Answer 3

[Smeecy Smeecy]

Легче вырезать фон как прямоугольник с белым косым низом и всё , если бы фон был бы не белый , тогда можно было думать)

Comments

[Михаил Завалко]

Smeecy Smeecy, ну да, был бы просто цветной фон не было бы проблем, накинул треугольников и все дела, а тут узор гребаный))

Answer 4

[Ankhena]

clip-path

Мое любимое решение - это множественный фон: снизу картинка (или 2 в зависимости от поведения содержимого блока), сверху линейный градиент под нужным углом (прозрачный-белый-прозрачный)

Comments

[Михаил Завалко]

Ankhena, почитал, похоже самый верный вариант, а нет какого-нибудь примера? Может в реализованных проектах?

[Ankhena]

Mixa_007, это к clip-path bennettfeely.com/clippy

Про градиенты я написала плохо открыв глаза и не заметив, что фон не сплошной белый.
Для сплошного белого: https://jsfiddle.net/L8fbxcat/
При фиксированных размерах блоков calc не нужен, написала для примера на случай адаптива.

[Михаил Завалко]

Ankhena, да, вот фон между картинками будет не сплошной белый, а узорчик с кружочками)) Огромное спасибо! Очень помогли мне)) Буду пробовать.

Answer 5

[Anton Guz]

Поворачивать еще можно с помощью transform: rotate. Только всевдоэлементы придется увеличивать по отношению к родителю.