How to make a responsive shape with a background image?

Question

css

The following layout is given:

Above is a figure with a picture and a shadow, in the middle too, below is a figure with a translucent color. Let's say there are no shadows (for simplicity). Inside the blocks there is arbitrary content that can go under each other, stretching the main block. Also, when you increase or decrease the screen, the figure itself should be saved.
We will talk about the middle block:
First, I tried to divide it into three logical parts: I made up the

figures above and below through svg. There was a problem that the background is located inside the main block and it is impossible to stretch it on svg.
Went the other way. Represented the entire block as a rectangle with a png background.

Docking with the lower block was successful, because with the help of svg I made two yellow triangles that overlapped the background of the middle one. And there was a problem with the top one: when the screen size was increased, the border of the blocks was "erased" and they turned into two rectangles. This is logical, since the top one, except for `background-size: cover`, does not put anything.
There was an idea to somehow make a svg figure with a background image and somehow html to fasten, but it seems to me that I am complicating and there are much simpler solutions. I also thought about clip-path, but there is no browser support (
I would be very grateful for an explanation of how to typeset this so that the figure remains regardless of the screen / block size + there is a background image.

Answer 1

I still had to use clip-path. I hope that browsers will not let you down)
Example: https://codepen.io/FLighter/pen/dmrdBm

Answer 2

You don’t need to make triangles, but make a mask-filter that will add a mask to the photo ... a kind of transparent border in the form of a triangle, that is, how to block the picture with this border .... if I can do it, I will show an example
Look here : I applied the mask as I wrote above : https://codepen.io/topicstarter/pen/YagNyJ?editors=0110
this is an example of an adaptive mask: https://codepen.io/topicstarter/pen/NYJdjx