To create an arrow we can start by defining the circular element in the center of the gauge that holds the arrow. This is easy and doesn't introduce anything really new; here's the code that needs to be nested within the div[data-gauge] selector:
div[data-arrow]{
position: absolute;
@include px_and_rem(width, 2, $multiplier);
@include px_and_rem(height, 2, $multiplier);
@include px_and_rem(border-radius, 5, $multiplier);
@include px_and_rem(bottom, -1, $multiplier);
left: 50%;
@include px_and_rem(margin-left, -1, $multiplier);
box-sizing: border-box;
border: #{0.05 * $multiplier} solid rgb(99,99,99);
border: 0.05rem solid rgb(99,99,99);
background: #fcfcfc;
}The arrow itself is a more serious business; the basic idea is to use a linear gradient that adds a color only to half the element starting from its diagonal. Then we can rotate the element in order to move the pointed end at its center. The following is the code that...