如何使用CSS与Webkit自定义滑块滑块柄的多边形形状？

可行方案：用clip-path定义任意多边形 #

既然你已经给滑块手柄设置了-webkit-appearance: none;，就完全脱离了原生样式的限制，可以直接用CSS clip-path属性创建任意多边形形状。

示例1：三角形滑块手柄 #

#slider::-webkit-slider-thumb{
    box-shadow: 0 0 0 #000;
    border: 3px solid #0ac2ac;
    background: #0ac2ac;
    cursor: grabbing;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    /* 上顶点、右顶点、左顶点组成的三角形 */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

示例2：五边形滑块手柄 #

只需调整clip-path的坐标值即可生成复杂多边形：

#slider::-webkit-slider-thumb{
    /* 保留基础样式 */
    box-shadow: 0 0 0 #000;
    border: 3px solid #0ac2ac;
    background: #0ac2ac;
    cursor: grabbing;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    /* 五边形路径 */
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

示例3：用border实现简单多边形（箭头形） #

对于一些简单的多边形，也可以通过透明边框组合实现：

#slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #0ac2ac;
    cursor: grabbing;
}

替代方案：伪元素模拟滑块手柄 #

如果遇到旧版WebKit浏览器对clip-path支持不佳的情况，可以把原生滑块手柄设为透明，再用伪元素绘制多边形：

#slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    cursor: grabbing;
    position: relative;
}

#slider::-webkit-slider-thumb::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0ac2ac;
    /* 菱形路径 */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

内容的提问来源于stack exchange，提问作者Stefano