Как сделать наложение трех элементов (чтобы каждый каждый последующий был выше но самый последний был выше первого)?

Question

[Сергей К]

Как сделать наложение трех элементов (чтобы каждый каждый последующий был выше но самый последний был выше первого)

Comments

[asdasdqwe]

Как вариант, желтый элемент разделить на 2 части. Левая часть имеет z index: минимум. Правая чать z index максимум

[Ankhena]

Как сделать наложение трех элементов (чтобы каждый каждый последующий был выше но самый последний был выше первого)

Наверное, имелось с виду, ниже первого.

Но на картинке, он не ниже, а утыкается в край первого. Если бы он выглядывал из-под белого, тогда его просто нужно было разбить на 2 части.

[mayton2019]

Это - одна из нерешаемых проблем самой ранней 3Д графики. Если использовать алгоритм Художника. Тоесть сортировать объекты в пространстве и рисовать их полигонами то всё равно будет ситуация когда какую-то фигуру нариовать невозможно. Круговое перекрытие.

Решений два. (Всё в 3d графике. Тоесть ваши полигончики лежат не на плоскости а в пространстве X,Y,Z)
Первое. Берем и разрезаем один полигончик плоскостью другого и у нас получается уже не 3 а 4 полигончика
но они рисуются корректно.

И второе - это Z буффер. Тоесть для каждого пиксела экрана проставляем глубину. Изначально она равна бесконечности. Но каждый полинончик эту глубину корректирует. Различные варианты Z буфера сейчас работают во всех современных играх.

[RAX7]

Можно так:

<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>

.white {
  z-index: 1;
}
.blue {
  z-index: 2;
}
.yellow {
  z-index-left: 0;
  z-index-right: 3;
}

[Сергей К]

asdasdqwe, это сильно упрощенный пример для легкого понимания, по факту вместо отрезков сложные эдементы с большой вложенностью

[Сергей К]

Ankhena, это сильно упрощенный пример для легкого понимания, по факту вместо отрезков сложные эдементы с большой вложенностью

[Сергей К]

mayton2019, вот бы посмотреть как это реализовать ( это сильно упрощенный пример для легкого понимания, по факту вместо отрезков сложные элементы с большой вложенностью)

[Сергей К]

RAX7, это сильно упрощенный пример для легкого понимания, по факту вместо отрезков сложные эдементы с большой вложенностью

[mayton2019]

Сергей К, яже говорю. Эта задача уже решена в 3d графике. Определите вашу задачу в терминах 3d и не будет проблем.

[Сергей К]

mayton2019, а как это к вёрстке применить?

[mayton2019]

Сергей К, нарисуй нужную картинку в 3d max. Отрендери. А потом трассируй в векторное изображение. SVG например.

[Сергей К]

mayton2019, так как я описал ниже мне не Картинки нужно позиционировать, а блоки с большой внутренней вложенлстью

[mayton2019]

Сергей К, покажи исходник.

[Сергей К]

mayton2019,

[Ankhena]

Сергей К, нет на этой картинке ничего такого, что вы понарисовали и понарассказали в вопросе.
Градиент вообще не заходит ни под шапку ни на неё.

Да и дизайн начала нулевых можно бы уже сменить на что-то посовременнее.

[Сергей К]

Ankhena, градиент заходит под шапку. Вы знаете как решить вопрос указанный в теме? Или просто так пишите?

[Ankhena]

Сергей К, знаю. Я вам уже два варианта написала за это время, а вы всё спорите.
1. Разрезать один из слоев.
2. Не заводить градиент под шапку. Зачем он там?