Css 创建曲线并用作滑块裁剪图像效果

我是css新手，我有一个简单的滑块，我想在末尾添加曲线效果

所以我读了相关文章，发现最简单的解决方案是在put-inside滑块中添加一个曲线svg，但是我如何才能在那里添加一个svg呢

我试图创建svg曲线，但没有成功

<svg xmlns="http://www.w3.org/2000/svg" style="fill:#0e4f1f;">
<path d="M -14.73 -1.42 C -1.7 9.78, 8 9.89, 20.9 -1.81">
</svg>

---

可以使用此值作为边界半径

border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;

您可以使用该值来实现不同的曲线半径

#主滑块{
宽度：100%；
高度：528px；
边界半径：0%0%60%60%/0%0%20%20%；
}

---

可以使用此值作为边界半径

border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;

您可以使用该值来实现不同的曲线半径

#主滑块{
宽度：100%；
高度：528px；
边界半径：0%0%60%60%/0%0%20%20%；
}

---

我认为这些值是上、左、下、右，但为什么要将它们分开，你能解释一下这些代码吗？每个角都可以给出两个值，它们定义了两个方向上的半径。第一组值（水平半径）/第二组值（垂直半径）I虽然值是顶部、左侧、底部、右侧，但为什么要将其分开，您能解释一下代码吗？每个角都可以给出两个值，这两个值定义了两个方向的半径。第一组值（水平半径）/第二组值（垂直半径）