如何在Tailwind中实现自定义三角形滑块的填充效果

你的三角形滑块轨道通过clip-path定义了三角形形状，但填充层仅通过宽度控制显示范围，未限制自身形状，导致蓝色填充超出三角形边界。

解决方法很简单：给填充层应用与轨道完全相同的clip-path属性，让填充区域的形状和轨道保持一致，这样滑动时填充只会在三角形范围内显示。

修改后的代码 #

{/* track */}
<div className="absolute h-48 top-[80%] translate-y-[-50%] w-full bg-background-white [clip-path:polygon(100%_0%,100%_100%,0_100%,_0%_50%)]" />
{/* fill */}
<div
  className="absolute h-48 top-[80%] translate-y-[-50%] bg-toast-icon-tag-active [clip-path:polygon(100%_0%,100%_100%,0_100%,_0%_50%)]"
  style={{ width: state.getThumbPercent(0) * 100 + "%" }}
/>

优化方案（避免重复代码） #

可以把clip-path抽成单独的CSS类，提升代码可维护性：

.triangle-slider-clip {
  clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0% 50%);
}

然后在JSX中引用这个类：

{/* track */}
<div className="absolute h-48 top-[80%] translate-y-[-50%] w-full bg-background-white triangle-slider-clip" />
{/* fill */}
<div
  className="absolute h-48 top-[80%] translate-y-[-50%] bg-toast-icon-tag-active triangle-slider-clip"
  style={{ width: state.getThumbPercent(0) * 100 + "%" }}
/>

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