Как грамотно сверстать подобные блоки?

Question

[Михаил Р.]

Всем привет!

Сижу думаю, как грамотнее сверстать то, что на скрине ниже:


Подробности: 2 блока, у каждого блока свой bg, блоки разделены наклонными линиями (рыжая и бледно-рыжая). При сужение окна, пересечение линий должно оставаться в центре.

Что делать, сразу готовить bg изображения с резанным 'низом', или 'резать' низ через css, но тогда как зафиксировать полоски по низу этого 'резанного' bg?

Спасибо!

Answer 1

[Михаил Р.]

Решили вопрос так:

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1200 600" preserveAspectRatio="xMinYMin meet" >

<rect id="rectFon" width="100%" height="100%"  />
<path id="rightLine" d="M1197 261 600.25624 376.79371c0 0 0 21.41258-0.25624 23.20629l597-113z"  />
<path id="leftLine" d="M0 261 661.53747 388.79371 598.97502 400.51249 0 287Z"/>
</svg>  
</div>

.container {
width:100%;
height:100%;
}
#rectFon{
fill:black;
}

#rightLine {
fill:#ffa896;
stroke-width:4;
stroke:#ffa896";
}
#leftLine{
fill:#ca432b;
stroke-width:4;
stroke:#ca432b;
}

Answer 2

[kulaeff]

Имхо, у вас и так и так есть файл (png или jpeg) с фоном, почему бы не добавить туда эти полоски. Зафиксировать можно с помощью background-position. Это то, что первое в голову пришло. Чтобы точно ответить, маловато вводных данных. Будут ли блоки, содержащие эти фоны меняться по высоте. Если будут, то насколько критично вертикальное выравнивание этих фонов. Может быть нужно не по низу, а по верху, или по центру.