Как сделать переход секций в подобной манере?

SVG, т. е. картинкой.

Можно градиентами сделать, наверное, но я бы не стал геморроится.

Просто возьми как фон его - это намного быстрее и не так геморно, а так можно было добавить блок, с абсолютным позиционирование и в нем ещё блоки из которых бы ты сделал треугольники с помощью CSS и тоже с позиционировать их как тебе нужно, но это очень долго и не просто, поэтому просто скопируй картинкой и все, все равно никто не увидит и не оценит что ты запотел и сделал это через CSS.

yadscreech, я взял как фон, но проблема в том что его нельзя сделать на весь экран. Потому что если фон секции поставить на center no repeat то по бокам сайта белые колонки. а если убрать center no-repeat, то все нормально, но снизу эти желто серые линии повторяются и теряют в качестве

imageneyshen, background-size, да и в целом почитай про background