Z-index головоломка — как расположить фигуры внахлест одну за другой?

Question

[zxqb]

Перед Вами три фигуры. Нужно сверстать их по данному макету сохраняя целостность фигур.

Comments

[Александр]

Суть примерно та же https://css-tricks.com/weaving-a-line-through-text...
Ну или можно одну из фигур задублить, лучше зелёную, и половинкам настроить z-index.

Answer 1

[Виталий Першин]

Как вариант:

Answer 2

[Nik Faraday]

Окей, включаем математику. Если предположить, что z-index 1-го (Красный) элемента x, тогда z-index 2-го элемента (Зеленый) y должен быть y > x. Теперь интересное. Если брать z-index 3-го (Синего) элемента z относительно 1-го элемента (Красного), тогда он должен быть z < x, а если брать относительно 2-го (Зеленого) элемента, тогда он должен быть z > y

Если подставить это всё в уравнение, тогда получается как-то так:

z > y => y > x => z > x, но
z < x

А действительно тут может быть способ просто сделать фигуры не целостными, т.е. тот же красный элемент разделить на две элемента, значение одного больше z-index'а 3-го (Синего) элемента, а второго меньше чем в зеленого