How to create and use a mask correctly?

Question

css

Hello!
There is a slider layout - hkar.ru/DWXV
It was necessary to make the left part through masks (that is, the source will be a full-fledged image, and not pre-cropped)
How to create and then apply a mask?

Answer 1

What's the problem ? There are a lot of options, you can look in Yandex.
1. Just create 2 blocks, position them on top of each other and use the z-index to control who is higher and who is lower. The easiest options.
2. Pseudo-classes, you can use them. actually (:before and :after) do not forget to specify the container property.
3. Another thing that comes to mind is js canvas.
4. css clip-path.
5. The mask property
6. Here are the links: read also on Habré
There are a lot of ways, which one is right for you, I don’t know.
Just type in Yandex, working with css masks
Each method has its own positive aspects and disadvantages.
You can choose js, there will be no special problems, but the most practical is the 1st option.
I use a lot of them, most often it's a simple insert via css, in which case the manipulations are limited. So you need to put svg from the beginning and then cut through css