Working with complex shapes (elements), any ideas?

Question

css

To understand what I will write about below, here is a screenshot to familiarize yourself with the task c2n.me/3gF4B4g.jpg
And so the task is as follows:
We have 2 elements background # 1 and background # 2 they run into the MAIN IMAGE image, by clicking on " CTC MEDIA" they move background #1 up and background #2 down and the image remains alone on the "stage".
What can't be done, you ask?
And the following:
Curved shapes for background #1 and background #2, taking into account the fact that this is not an img and not a background, but a background implemented using geometryangle.js, you can also familiarize yourself with this script here The script "renders" in 3 ways svg / canvas / webgl, I in turn chose canvas because it gives the least load. www.jqueryscript.net/other/ jQuery-Plugin-To-Create...
In html it looks like this: c2n.me/3gF7jcR.png (an example of one from background ).
What I tried:
1. CSS clip-path mask (but doesn't work in mazil and opera)
2. SVG clip-path (canvas container doesn't want to react to it)
And so dear friends, maybe someone has at least some ideas, for the 3rd day I can’t think of anything, google and friends silently make surprised eyes :)

Answer 1

Thank you all, everyone is free :) I
found the solution myself, and so we do in css to the element we need, for example div -webkit-clip-path: polygon (the coordinates we need). But it doesn't work in firefox... WE take the following script https://github.com/andrusieczko/clip-path-polygon. And cheers! Everything works as we need. The proportions are preserved. the data is given as a percentage, and the script recalculates them.
But it's not hard to animate, you'll figure it out)

Answer 2

And again I ask: What does not work?)

Answer 3

jsfiddle.net/QW01_01/7Lbku1t8/1