Consider every four circles as the four vertices of a rectangle, and the dotted lines can be implemented using border-style dashed.

Then the entire page is stacked vertically one by one like this rectangle. Two vertices are placed in each rectangle, and they are absolutely positioned at the upper left corner and upper right corner of the rectangle.

https://codepen.io/straybugs/…

There is no purely horizontal and vertical progressive relationship, it looks very awkward.
The relationship between each layer is not related by pointers but by looking at the number of steps below. Bad review.
There are also two process descriptions with dark backgrounds, but I don’t know the purpose.
The overall experience is too poor, especially the process is too narrow, which affects the user’s attention.

background-image
canvas
pseudo-class

If the width is fixed, I might throw the lines into the background, hahaha

width || height: calc dynamically calculates line width. This black line can use pseudo elements, ::before ::after, their parent classes are all host elements. I think canvas is a bit overkill, but it can be achieved with css.

1. Cutting with pictures is one way.
2. Or use the extra p of the layout for positioning, and border: 1px dashed #000 for style. . That’s it.
3. Use css pseudo-class to implement.

If it is a browser after IE8, use pseudo classes to implement it

p:after {
    content : "";
    display : block;
    position:absolute;
    background : url(); //把图片换好就行，如果支持css3的话一张图片就行了，可以自行旋转
}

If it is compatible with previous browsers, you can only use p to simulate a wave. It depends on your personal needs.

Support students who use canvas, you can take a step back and use pictures to cut pictures.

First use ul li float to float, then write a class.bg{position:relitive}, write two pseudo-classes, namely horizontal lines and vertical lines, and just position them according to the design draft