Actualmente estoy en el proceso de aprender todo sobre CSS, así que estoy tratando de generar diferentes formas con diferentes funcionalidades.

Actualmente estoy trabajando en un proyecto que requiere una flecha horizontal para mostrar el "progreso" de una transacción.

Así que estoy tratando de generar una flecha 'barra de progreso' como:

                 |\
                 | \
+----------------+  \
|XX|    10%          >
+----------------+  /
  \              | /
   \             |/
    \the XX's depict a different color.

Actualmente soy capaz de 'llenar' hasta la punta de la flecha, pero por la forma en que he generado la punta de la flecha, parece que tampoco puedo 'llenarla' en línea (es decir, a ~ 90%, la mitad del físico la cabeza debe estar llena), y no todo.

Mi fragmento actual:

.arrow{
    margin:0 auto;
    height:100px;
    width:200px;
    background:red;
    margin-top:60px;   
    position:relative;
    /*overflow:hidden;*/
}

.arrow:before, .prog:before{
    content:"";
    position:absolute;
    right:-100px;
    border-left:100px solid red;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    top:-50%;
}

.prog{
    position:absolute;
    height:100%;
    width:0%;
    background:blue;
    transition: all 0.8s;
}

.arrow:hover .prog{
    width:100%;
}
.prog:before{
    border-left:100px solid transparent;
    transition: all 0.8s;
}
.arrow:hover .prog:before{
    border-left:100px solid blue;
}

<div class="arrow">
    <div class="prog"></div>
</div>

esto realmente no funciona ya que 'ves los puntos' fuera del cuerpo de la flecha, por lo que parece que aparece otra flecha delante de ella, en lugar de 'llenarla'.

un violín vive aquí

He usado un efecto de desplazamiento como demostración, aunque me gustaría usar jquery para establecer el porcentaje completo