创建曲线并用作滑块裁剪图像效果[重复]答案

【问题标题】：Create curve and use as slider crop image effect [duplicate]创建曲线并用作滑块裁剪图像效果[重复]
【发布时间】：2020-07-13 17:00:33
【问题描述】：

我是 css 新手，我有一个简单的滑块，我想在最后添加弯曲效果

所以我阅读了它，我发现最简单的解决方案是添加一个弯曲的 svg 放在里面的滑块，但是我怎样才能在那里添加一个 svg 呢？

我尝试创建 svg 曲线here，但没有成功。

<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>

我的滑块图像

#main-slider {
    width: 100%;
    height: 528px;
}

 <img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider">

【问题讨论】：

标签： css svg

【解决方案1】：

可以通过将此值用作边界半径来完成

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

你可以玩弄这个值来实现不同的曲线半径

#main-slider {
    width: 100%;
    height: 528px;
    border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;
}

 &lt;img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider"&gt;

【讨论】：