similar parallax scrolling, Baidu, the small triangle background image put a long picture, the triangle to the right, the background to the left.

write a piecewise linear interpolation function to correspond to two sets of values. Enter the number axis as your numerical segmentation point, and output as the front-end page positioning coordinates and color values.

I think we can do it in a blind way. The
triangular row is directly made into a div
div background image is a DNA methyl map with no numerical value
div has

there are two white bars and a small square between them. The
box uses the border attribute to make the triangle border white and transparent in the middle.
left, middle and right layout.
change the width on the left and right sides according to the numerical value

since the demarcation point is not regular, your following example has to be proportional. How can we divide it equally? Set the maximum and minimum number, and then calculate the proportion to decide where to point.