Change shape of gradient progress bar

Issue

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:

I want to keep it as gradient bar only, but just want to change shape of progress bar.

Solution

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>

Answered By - Franco Gabriel