How to lay out two adjacent beveled blocks if they have backgrounds?

Question

css

Good afternoon, colleagues.
I have a question for which there are a thousand "toasts", but I can not find the right one.
SUBJECT:
There is a website design where all sections have a beveled top/bottom. In addition, each section has either a gradient or a photo background.

QUESTION:
How, in your mind, to make up this?
clip-path - yes, but it has a nasty property akin to overflow: hidden;
transform + pseudo - how exactly? I can’t think of who to assign the substrate to, so that it doesn’t crawl out of the bevel and warp itself, and also stretch out over the entire visible (!) Area.
Has anyone dealt with such a request? Thank you in advance for your response.

Answer 1

I think it's better to play with svg
pattern-blog.com.ua/article/skoshennyie-elementyi-...
bennettfeely.com/clippy

Answer 2

How to lay out a beveled block?
Cut/beveled corners on a DIV layer with custom background inside and below it in pure CSS. Is it real?
https://www.google.ru/search?q=%D0%9A%D0%B0%D0%BA+...

Answer 3

and there seems to be no pure gradients. even on the blue part there are pieces of photographs. if you make these pieces in PNG and put on top of the gradient, then it may well turn out that it weighs more than if you press the gradient background all the way in one jeep. it turns out that there is simply no point in separating any two beveled blocks, since they are both pictures.
therefore, a completely acceptable option is to leave everything as a few solid bitmaps along the boundaries of horizontal blocks. besides, it will be fair: swindlers must suffer.
but if we talk specifically about the technical feasibility, then you can try to make svg-shny backgrounds with one beveled side nailed to the edge of each section.