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> 

更多信息