Как правильно сверстать бэкграунд с фигурой-разделителем?

Question

[Shad30]

Подскажите как правильно сверстать такой фон для макета. Верхняя часть 1 цвет, потом разделитель в виде так так сказать треугольника(зеленый), вторая часть другой цвет. Пример на картинке.


Пока в голову приходит только мысль разбить все на прямоугольники(1 и 2) и треугольники(3-4-5). И уже в css делать


Подскажите если уже есть "правильные" методы для таких случаев или такй вариант так же сойдет?

Answer 1

[Сергей ZSA]

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

Comments

[Shad30]

Да это должно быть просто фоном