Как сделать это на css?

Question

[Worddoc]

Ребята, не могу решить одну проблему. Нужно сделать так:


Я могу для каждой картинки сделать блок-маску в 50% со skew и прилепить к нижнему/верхнему краю через position: absolute. А затем, нижнюю картинку подтянуть через отрицательный margin. Все хорошо, но проблема в том, что при ресайзе ширины браузера, эта маска съезжает и ровная состыковка не получается. Спасайте, никак не могу решить эту проблему. Спасибо...

Можно работать с этим:
https://jsfiddle.net/bxsy5krq/

Comments

[Ankhena]

Теория: множественный фон:
градиент белый-прозрачный под нужным углом для правой стороны,
градиент белый-прозрачный под нужным углом для левой стороны,
правая картинка,
левая картинка

[Worddoc]

Ankhena W: а если нужно, чтобы картинки были отдельными сущностями?

[Ankhena]

Worddoc: в смысле через img? Тогда им обертку и белый треугольник в ::before.
Ну или сразу отрезать как надо.
Не видно всей задачи.

Answer 1

[twobomb]

Если картинки имеют фиксированный размер делай с помощью масок. Например так.
Хотя даже если не фиксированный то с помощью js можно рассчитать и задать параметры ну это геморно.