Change shape of gradient progress bar - html

Question

I have a gradient progress bar. My code is as follows:
CSS:
.progressbar {
height: 15px;
border-radius: 1em;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat-x,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
HTML:
<div class="progressbar" style="width:80%;"></div>
I want to keep it as gradient bar only but just want to change shape of progress bar. I want shape of progress bar as arrow as shown in image attached.How I can change shape of progress bar? .

Answer 1

It's a difficult one, and this workaround will not work if you don't use a solid background. But here's the trick done with pseudo elements. Hope it helps.
More info about CSS triangles here.
.progressbar {
position: relative; /* for position absolute of pseudo element work */
height: 56px;
margin:5px;
background:
linear-gradient(-45deg,
rgba(255, 255, 255, 0.15) 25%,transparent 25%,
transparent 50%, rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,transparent 75%)
left/30px 30px repeat,
linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
lightgray;
box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
}
.progressbar:after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 28px solid white; /* Your background color*/
border-bottom: 28px solid white; /* Your background color*/
border-left: 28px solid transparent;
}
.progressbar:before {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 28px solid white; /* Your background color*/
}
#keyframes change {
from {background-position:0 0,left}
to {background-position:30px 0,left}
}
<div class="progressbar" style="width:80%;"></div>