前端实行不规则的进度条的问题？

Question

实现效果：如上图的进度条，他的数据是动态传出入的
问题点：
1，这个进度条的底下对应的数据是不太规则的，45到41,41到38.5之间的空余不是有规可循，如何根据传入的数值让上方的小三角移动到对应的位置？
2，小三角的颜色要与底下进度条渐变色对应该如何实现？

Answer 1

我觉得可以用障眼法做。三角那一排直接做成一个divdiv背景图是没有数值的DNA甲基图 div里面有两个白条和 中间夹着这个一个小方块。方块利用border属性做成三角形边框白色中间透明即可。左中右布局。根据数值来改变左右两边的width即可