Как сделать сдвиг элемента списка относительно предыдущего?

Question

[Eugene Chefranov]

Имеется такой список



Необходимо чтобы каждый элемент списка сдвигался относительно предыдущего.
Как без явного хардкода, универсально сделать такой список?

Answer 1

[Ankhena]

Не без проблем, но без явного указания номера элемента
https://jsfiddle.net/9d2mzLyn/

Но нужен overflow для родителя, высота для псевдо больше максимальной высоты пункта списка и чтобы вся конструкция помещалась по горизонтали.
У вас, кстати, псевдо и по макету подходит.

Я сомневаюсь, что такая лестница нужна больше, чем для 10-ка пунктов (да и в 10 не верю). Так что проще напрямую через nth-child.

Answer 2

[RAX7]

Comments

[Eugene Chefranov]

Ну тут очевидный вариант) Но что если допустим 30 элементов? Для каждого nth-child() такое себе. Единственное, что нашел, так это сделать через фигуру в виде треугольника и сделать обтекание по ней. Других способов на CSS похоже нет.

[RAX7]

Eugene Chefranov, ты же просил без харкора =)

сделать через фигуру в виде треугольника и сделать обтекание по ней.

Это с использованием shape-outside?

[Eugene Chefranov]

RAX7, да https://stackoverflow.com/questions/46492809/css-h...

[RAX7]

Eugene Chefranov, ну как вариант, но я сомневаюсь, что таким образом получиться воткнуть 30 элементов. Float весьма специфичная штука.

Answer 3

[Арсений Матыцин]

Ко всем прочим решениям, это типичный вложенный список (не обязательно, но смещение это прямо их родное). https://codepen.io/i-am-studio_ru/pen/yLJMOvx к родным отступам все что нужно — скорректировать отступы. В качестве бонуса позволит вкладывать очень долго)