Question 368125 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make custom triangle slider fill in tailwind

I’m trying to make a custom triangle slider.

This is what I’m trying to achieve:
enter image description here

So far, I’m able to make this shape, but as I slide it, the blue fill covers the shape:
enter image description here

        {/* 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 + "%" }}
        />
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just have to wrap the fill inside track so that the fill can follow the shape of the track.

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

    enter image description here

    Thanks to those that has try to help me, I really appreciate it.


  2. 0 
    <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>

    Might be something like this ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search