CSS如何制作ul＆gt; li楼梯效果

Question

我需要一个简单的无序列表，每个下一个子li都有一个自动递增的margin-left。最后这应该是：

（等等无限......）

我知道可以通过简单地将元素无限地嵌套在另一个内部或手动设置每个下一个li元素上的margin-left增加一些值来实现。但我想尝试解决这个没有这些解决方法，但只在本机CSS。

我唯一的想法是在li中创建一个:after伪，它位于父li的相对位置，并由左下角溢出，所以，那个伪也与下一个兄弟li元素重叠（li和它的:after伪应该具有float: left;属性。但那没用。所有我得到的 - 是伪元素溢出它的父级并重叠下一个兄弟li，所以浮动不起作用。我没有可能的原因。你有什么想法吗？

Answer 1

您可以使用css形状创建所需的视觉效果：

Note that support is currently limited

实施例

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>

More information