如何使自定义三角形滑块填充顺风

Question

嗨，我正在尝试制作一个自定义三角形滑块，我只需要 1 个小细节，希望你们能帮助我。 我想要实现的目标：

到目前为止，我能够制作形状，但是当我滑动它时，蓝色填充覆盖了形状

        {/* 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"}
          style={{ width: state.getThumbPercent(0) * 100 + "%" }}
        />

Answer 1

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

可能是这样的？