如何使用CSS和Webkit自定义滑块拇指的形状？

Question

我知道如何使用CSS和Webkit自定义滑块拇指的一些属性。例如：

#slider::-webkit-slider-thumb{
    box-shadow: 0px 0px 0px #000000;
    border-radius: 50%;
    border: 3px solid #0ac2ac;
    background: #0ac2ac;
    cursor: pointer;
    -webkit-appearance: none;
    cursor: grabbing;
    height: 15px;
    width: 15px;
}

相反，我不知道，也没能在网上找到如何使用CSS和Webkit自定义滑块拇指的形状。

我希望使用多边形，而不是滑块拇指的默认圆形

有没有一种方法可以通过使用CSS和Webkit来做到这一点？如果没有，实现我的目的最有效的替代解决方案是什么？

谢谢！

Answer 1

我通过添加clip-path: polygon(<path>)并将background: <colour>更改为background: url("<entire svg code>")来解决问题。

Answer 2

我最近遇到了同样的任务，我使用的css与发布的问题有点相似，但也陷入了同样的问题。

就我的情况而言，似乎我必须添加页边空白才能让它发挥作用。

我补充道：

margin-top:-8px

如果我不加上它，它将永远是蓝色的圆圈。