Примерно так
$('.scoreContainer').find('.score').each(function() {
var high = $(this).attr('data-high'),
low = $(this).attr('data-low'),
score = $(this).attr('data-score');
var position = ((score - low) / (high - low)) * 100
$(this).find('.arrow').css('right', position + "%");
$(this).find('.arrow').html('<span>' + score + '</span>');
});
.scoreContainer {
background: #ff3232;
background: -moz-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
background: -webkit-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
background: linear-gradient(to right, #ff3232 0%, #ffff30 50%, #95ef81 100%);
width: 400px;
height: 20px;
position: relative;
margin-bottom: 25px;
display: flex;
}
.score{
width: 33.33%;
height: 100%;
position: relative;
}
.arrow {
position: absolute;
right: calc(100% - 5px);
top: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow span {
font-size: 10px;
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scoreContainer">
<div class="green score" data-high="600" data-low="400" data-score="475">
<div class="arrow"></div>
</div>
<div class="yelow score" data-high="399" data-low="200" data-score="201">
<div class="arrow"></div>
</div>
<div class="red score" data-high="199" data-low="0" data-score="99">
<div class="arrow"></div>
</div>
</div>