您可以创建一个HTML列表，将其剪切成包含渐变的DIV吗？

我知道可以通过CSS在背景图像上裁剪形状，但这并不完全是我想要的，因为我想将列表裁剪为div

我想要这种效果：

我目前正在Wordpress中使用PHP创建自定义帖子类型，并为每个类别创建专用网页（总共9个）。我在左边放了一个“目录”，它将显示该类别中每篇文章的标题，这将在同一页上作为下面正确文章的锚链接

我知道CSS nth:children的笔名有很多选择，但我真的不明白这是怎么回事，因为目录的长度会因主题的不同而有所不同，而且将来可能会发生变化

我考虑过做以下几点：

<div class="gradient">
    <ul class="gradient-list">
        <li><?php code ?></li>
        <li><?php code ?></li>
        <li><?php code ?></li>
    </ul>
</div>

---

但很自然，这是行不通的。最后，在我的草图中，当列表项达到一定的对比度时，我将其从白色变为黑色。如果这不容易，甚至不可能，我将只使用更亮的颜色作为列表的背景，这样对我来说就不那么重要了。

您可以使用

剪辑路径

技巧和伪元素，如下所示：

.gradient列表{
填充：10px；
位置：relative；/*使伪元素相对于同一个元素，以便它们重叠*/
z指数：0；
}
.梯度列表李{
填充物：5px；
利润率：10px；
颜色：#fff；
字号：18px；
剪辑路径：插入（0）；/*使伪元素仅覆盖li区域*/
}
/*低于你的梯度*/
李：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景：线性梯度（180度，rgba（2,0,36,1）0%，rgba（9,9,121,1）35%，rgba（0,212,255,1）100%）；
}

清单1
清单2
清单3


清单1
清单2
清单3
清单4
清单5
清单6

.gradient {
background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-list {
  padding: 10px;
  }

.gradient-list li {
      padding: 5px;
      margin: 10px;
      clip-path: rectangle(0px 5px, 10px 4px);
}