Как поместить последний элемент под первый (z-index)?

Question

[Ярослав Иванов]

Как поместить зеленый элемент под красный ?
google ответа не дает либо гуглю не так.
Если что ковыраю в песочнице этот пример https://jsfiddle.net/space2pacman/8whts8r7/2/
В примере надо синий спрятать под белый.
Какие мысли по этому поводу ?
UPD:
По поводу примера из песочницы. Нужен такой результат

Answer 1

[Олег]

Несколько вариантов. дал в дискуссии веткой ниже ;)
https://jsfiddle.net/Politonius/5xgjgr8v/
высчитывать лень) но приблизительно так https://jsfiddle.net/Politonius/5xgjgr8v/1/
https://jsfiddle.net/Politonius/5xgjgr8v/2/

Comments

[Ярослав Иванов]

Так если я зеленому сделаю индекс ниже чем у красного он же под желтый тоже спрячется.

[Ярослав Иванов]

Олег вы не так пример поняли) мне надо чтобы синий был выше зеленого но прятался под белый. А вы просто спрятали под оба.

[Олег]

Ярослав Иванов, Вот более современная реализация https://jsfiddle.net/Politonius/5xgjgr8v/

Answer 2

[tema_sun]

Думаю, что никак. В жизни, чтобы получить такой результат, вам надо согнуть плоскости. Мне не приходит в голову как их можно "гнуть" в html, или в том же Фотошопе.

Comments

[Олег]

https://jsfiddle.net/Politonius/5xgjgr8v/

[Ярослав Иванов]

Олег, Мне на css надо :)

[Олег]

Ярослав Иванов, высчитывать лень) но приблизительно так https://jsfiddle.net/Politonius/5xgjgr8v/1/

[tema_sun]

Все же это не то. Речь же не про то, что визуально это сделать нельзя. Я про то, что не может у элемента гнутого z-index'a быть.

[Ярослав Иванов]

Олег, похвально но не ровно)))

[Олег]

Ярослав Иванов, так знаю)
сама суть твоего решения есть)

[Ярослав Иванов]

Олег, А если мне 4 блока надо ?))) не масштабируемо)

[Олег]

Ярослав Иванов, Еще проще https://jsfiddle.net/Politonius/5xgjgr8v/2/

[Ярослав Иванов]

Олег, Все ты делаешь забитонированным))) а если 5, 6, 7 ?)

[Олег]

Ярослав Иванов, тогда дрочить вариант с косыми borderami)) Высчитывать. Но ну нах. Проще на canvas

[Ярослав Иванов]

Олег, да на канве проще но надо без js-a)

[Олег]

Ярослав Иванов, https://jsfiddle.net/Politonius/5xgjgr8v/3/

[Ярослав Иванов]

Олег, хотя пожалуй отмечу. Может пригодится )

[Олег]

Ярослав Иванов, Да и ромбами можешь делать, если такой секс устраивает)

[Олег]

Ярослав Иванов, Угол проще просчитать ;)