How to correctly lay out such blocks?

Question

css

Hello!
I'm thinking how to more competently make up what is on the screen below:

Details: 2 blocks, each block has its own bg, the blocks are separated by slanted lines (red and pale red). When narrowing the window, the intersection of the lines should remain in the center.
What to do, immediately prepare a bg image with a cut 'bottom', or 'cut' the bottom through css, but then how to fix the stripes along the bottom of this 'cut' bg?
Thank you!

Answer 1

The issue was resolved like this:

<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

IMHO, you already have a file (png or jpeg) with a background, why not add these stripes there. You can fix it with background-position. This is what first came to mind. There is not enough information to give an accurate answer. Will the blocks containing these backgrounds change in height. If so, how critical is the vertical alignment of these backgrounds. It may be necessary not on the bottom, but on the top, or in the center.