CSS Triangle with partial fill - html

Question

I want to create a Triangle (preferably using a pure CSS method) that has a two colors. The triangle can be filled to a certain height, this has to be done dynamically on a website as the triangle represents the speed of a device. I want to accomplish the following result:
The yellow part of the triangle needs to be adjustable. (I don't mind althering the CSS using jQuery but the use of images is a no-go). I've managed to create a triangle using the 'border-method' and I've have managed to partially fill a square using a background linear gradient but the combination of both is proving to be quite a challenge.
.arrowLeft{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
float:left;
}
Does anyone have suggestions on how to solve my problem?

Answer 1

You can create two triangles and position then relatively:
.arrowContainer{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
position: relative;
}
.arrowContainer .arrowLeft {
width: 0;
height: 0;
border-style: solid;
border-width: 11px 0 12px 80px;
border-color: transparent transparent transparent red;
position: absolute;
right: 0;
top: -11px;
}
<div class="arrowContainer">
<div class="arrowLeft"></div>
</div>

Answer 2

You can create the triangular shape using the border and put the gray and orange div behind it using z-index method: https://jsfiddle.net/62yj9wn5/
html:
<div class="triangle">
<div class="vshape">
</div>
<div class="orange">
<div class="gray">
</div>
</div>
</div>
css:
html, body {background-color: black}
.orange {
background-color: orange;
width: 50px;
height: 120px;
position: relative;
margin: -120px 0 0 0px;
z-index: 1;
}
.gray {
background-color: gray;
width: 50px;
// change the hight dynamically
height: 50px;
}
.vshape{
width:0px;
height: 0px;
border-style: solid;
border-width: 120px 25px 0 25px;
border-color: transparent black transparent black;
position: relative;
z-index: 2;
}
You can easily reuse those classes if multiply the object and rotate it the "other" 3 directions.