CSS如何制作ul> li樓梯效果

Question

我需要一個簡單的無序列表 ，每個下一個子li都有一個自動遞增的margin-left。 最后這應該是這樣的：

（等無限......）

我知道可以通過簡單地將元素無限地嵌套在另一個內部或者手動設置每個下一個li元素上的margin-left增加一些值來實現。 但我想嘗試解決這個沒有這些解決方法，但只在本機CSS。

我唯一的想法是 - 在li創建:after偽:after ，它位於parent li相對內部並且由左下角溢出，所以，偽也與下一個兄弟li元素重疊（ li和它們都是:after偽:after應該有float: left; property）。 但那沒用。 所有我得到的 - 是偽元素溢出它的父級並重疊下一個兄弟li，所以浮動不起作用。 我沒有可能的原因。 你有什么主意嗎？

Answer 1

您可以使用css形狀創建所需的視覺效果：

請注意，目前支持有限

例

 div { shape-outside: polygon(0 0, 0 200px, 200px 300px); width: 300px; height: 200px; float: left; } span { display: list-item; list-style-position: inside; } 

 <div></div> <span>item</span> <span>item</span> <span>item</span> <span>item</span> <span>item</span> 

更多信息