How to make such a separator corner as cross-browser as possible?

Question

css

Help me make this thing (I can't find a name).

The top part of the picture is on top of the text and the button.
The bottom part is a slider or picture.
The layout is adaptive, it is important that it stretches.
came up with several ways

1. CSS clip-path works as it should but only in chrome
   
2. SVG cilp-path does not stretch as in step 1
   
3. Canvas , I don't know how to do everything that happened from the link
   

Answer 1

Given that the element is adjacent to the picture, maybe it makes sense to combine them?