Html 用CSS创建自然边

我正在尝试创建一个有吸引力的strat专栏（地质学）。我需要创建几百个，所以保持一致性需要CSS解决方案

下面是一个手绘版本，在左边有一个很好的自然的边缘，而不是我使用CSS的可怕尝试

下面是我用来创建上述计算机版本的代码，尽管它工作得并不完美，因为我没有服务器上的图案填充（我只是在我的计算机上运行HTML）

#层窗格{位置：绝对；顶部：0；底部：0；右侧：0；左侧：0；}
#层列{边距：30px自动；宽度：90px；}
.member{宽度：120px；边框：1px纯黑色；位置：相对；}
.member.slope:在{content:''之后；显示：块；位置：绝对；顶部：-1px；底部：0；右侧：-1px；宽度：50%；背景：线性渐变（到左下角，rgba（255255,1）50%，rgba（255255,0）51%）0/100%100%；}

---

也许SVG过滤器可以让您更接近，您不需要在代码中做太多更改。我只是用

剪辑路径

#战略窗格{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
过滤器：url（“#goo”）；
}
#层柱{
保证金：30像素自动；
宽度：90px；
}
.成员{
宽度：120px；
位置：相对位置；
}
.斜坡{
剪辑路径：多边形（0,0 100%，100%100%，80%0）；
}

我有办法，但没有时间尝试。基本的想法是用这个回答你的问题吗？Css在这里是错误的选择。SVG显然是合适的选择。如果你真的想要一些不完美的东西，比如左边的图形，我会尝试画布或SVG，而不是没完没了地在CSS中添加细节。实现这一点的捷径可能是使用一些类似于图形库的图形，并在其侧面制作一个阴影折线图。我不确定我能看到剪辑路径如何创建自然的外观，它似乎需要基本形状（例如圆）。边界图像的想法可能会被拉伸和改变，使其看起来更自然，我将对此进行研究。我喜欢使用SVG，但我不知道如何在这个应用程序中使用SVG。@Termani。SVG剪辑路径对我来说是新的。这里有一些非常令人兴奋的可能性，谢谢。矩阵对我来说也是新的，我不是很了解它。它似乎在使边缘平滑一点。你能补充几句话解释一下你选择的具体值在做什么吗？这将有助于我对它进行一些调整，以获得我想要的外观。@Thomas这里有一篇关于效果的详细文章：