Как сделать кривой переход между секциями сайта?

Question

[Анатолий Богомол]

С помощью каких css свойств можно сделать такой переход?

Я сделал через clip-path: polygon но при уменьшении ширины экрана, и увеличении высоты блока, наклон фона меняется, и это не хорошо.
В каком направлении двигаться? Или лучше вернуться к перекрытию картинками?

Answer 1

[ReActor Дмитрий Вершанский]

используйте transform: rotate(30deg)

Comments

[ReActor Дмитрий Вершанский]

в вашем случае точнее будет transform: rotate(-10deg);

[Анатолий Богомол]

Буду применять transform: skew(0deg, -3deg); это подходит. Изучу свойство, и с помощью псевдо элементов сделаю наклоны. Спасибо.

[ReActor Дмитрий Вершанский]

Искажение да, тоже вполне, но не стал вам его предлагать так как при этом варианте появляется ступенчатая пикселизация особенно на низкочастотном разрешении

[Rustam Bainazarov]

Анатолий Богомол, не нужно. Используйте clip-path. Просто делайте его умно на calc().

Пришлю пример сейчас.

[Rustam Bainazarov]

Анатолий Богомол, Дмитрий HunteR, вот так, сжимайте, разжимайте окно результата, высота скоса всегда одинаковая (50px), поэтому можно спокойно без «магических цифр» совмещать такие секции с другими. На transform этого не добиться.

Answer 2

[Кирьян Горячев]

Можно попробовать задать фон через ::before, а к нему применить skew