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

Question

[Kakeru]

Вообщем вот сам переход под наклоном.

Answer 1

[Андрей]

Можно так

Comments

[kreoTech]

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

[Андрей]

Это для одной секции, в следующей секции меняем цвета местами

[Ankhena]

kreotech, ничего не изменится, если использовать bg size и bg position и поправить процентики.
И не 30% 30% писать, а с небольшой разницей, чтобы не было ступенек.

[kreoTech]

Ankhena, то есть предполагается после каждой правки лезть в CSS и менять bg position?
Или есть решение при котором будет автоматически подстраиваться под контент?

[Ankhena]

kreotech, бррр, зачем? Прибиваете фон к нижнему краю верхнего блока. Сколько бы ни было контента, скос всегда там (внизу) останется.

[kreoTech]

Ankhena, все дошло про что вы. Как вариант вполне.

[Ankhena]

kreotech,

Как вариант вполне.

Вообще-то вариант Андрей не "вполне", а самый простой, понятный и экономически выгодный.

Answer 2

[Александр Цымбал]

Но лучше всего создавайте в каждой секции цветную подложку (обычно это отдельный div с базовыми стилями position:absolute;z-index:1;left:0;top:0;width:100%:height:100%; - фоновый цвет задайте сами). И применяйте этому диву также css-свойство transform: skewY(-10deg) (значение подберите сами)
mosobogrev.ru - реализовано здесь
babycarmebel.ru - и здесь