如何使右侧箭头形状的进度条？

Question

Image progress bar

我尝试了伪元素：进行中之后bar -webkit，-o和-moz不起作用。 （见上图） 当进度条的值改变时，如何使进度条右侧箭头形状跟随进度条值

&-vote {
  margin-top: 5px;
  position: relative;

  &-color1 {

    &:before {
      content: '';
      width: 0;
      height: 0;
      left: -11px;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-right:11px solid #D0011B;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      right: -10px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #eee;
    }

    &--red {
      progress {
        background-color: #D0011B;
        border: 0;
        height: 30px;
        border-radius: 3px;
        width: 100%;
      }


      progress:after {
        content: '';
        width: 0;
        height: 0;
        left: -20px;
        top: 0;
        position: absolute;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;

        border-left: 11px solid #D0011B;
      }

      ::-webkit-progress-bar {
        background-color: #eee;
        border: 0;
        height: 30px;
        //border-radius: 3px;
        width: 100%;
      }


      ::-webkit-progress-value {
        background-color: #D0011B;
        border: 0;
        height: 30px;
        //border-radius: 3px;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 14px solid #D0011B;
        width: 100%;
      }

      progress::-moz-progress-bar {
        background-color: #D0011B;
        border: 0;
        height: 30px;
        border-radius: 3px;
        width: 100%;
      }
    }
  }


  &-color2 {

    &:before {
      content: '';
      width: 0;
      height: 0;
      left: -11px;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-right:11px solid #4990E2;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      right: -10px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #eee;
    }

    &--blue {
    progress {
      background-color: #4990E2;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }


    progress:after {
      content: '';
      width: 0;
      height: 0;
      left: -20px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #4990E2;
    }

    ::-webkit-progress-bar {
      background-color: #eee;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      width: 100%;
    }


    ::-webkit-progress-value {
      background-color: #4990E2;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 14px solid #4990E2;
      width: 100%;
    }

    progress::-moz-progress-bar {
      background-color: #EEE;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }
  }

  }

  &-color3 {

    &:before {
      content: '';
      width: 0;
      height: 0;
      left: -11px;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-right:11px solid #F6A623;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      right: -10px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #eee;
    }

    &--orange {
    progress {
      background-color: #F6A623;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }


    progress:after {
      content: '';
      width: 0;
      height: 0;
      left: -23px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #F6A623;
    }

    ::-webkit-progress-bar {
      background-color: #eee;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      width: 100%;
    }


    ::-webkit-progress-value {
      background-color: #F6A623;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 14px solid #F6A623;
      width: 100%;
    }

    progress::-moz-progress-bar {
      background-color: #EEE;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }
  }

  }

  &-color4 {

    &:before {
      content: '';
      width: 0;
      height: 0;
      left: -11px;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-right:11px solid #7ED321;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      right: -10px;
      top: 0;
      position: absolute;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #eee;
    }

    &--green {
    progress {
      background-color: #7ED321;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }


    progress::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      left: -20px;
      top: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;

      border-left: 11px solid #7ED321;
    }

    ::-webkit-progress-bar {
      background-color: #eee;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      width: 100%;
    }


    ::-webkit-progress-value {
      background-color: #7ED321;
      border: 0;
      height: 30px;
      //border-radius: 3px;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 14px solid #7ED321;
      width: 100%;
    }

    progress::-moz-progress-bar {
      background-color: #EEE;
      border: 0;
      height: 30px;
      border-radius: 3px;
      width: 100%;
    }
  }

  }