將每四個圈看成一個矩形的四個頂點，虛線則可以用 border-style dashed 來實現。

然後整個頁面就是由一個個這樣的矩形豎向堆起來，每個矩形裡放兩個頂點，分別絕對定位放到矩形的左上角和右上角。

https://codepen.io/straybugs/...

沒有純橫豎的遞進關係，看起來十分別扭。
各層的關係不是用指針去關聯而是看下面的步數，差評。
而且出現兩個暗背景流程說明，不知用意
整體體驗太差，尤其說明流程左右太狹隘，好影響使用者的注意。

background-image
canvas
偽類

如果固定寬度我可能會把線條丟到背景去，哈哈哈

width || height : calc 動態計算線條寬度， 這個黑色線條可以使用偽元素，::before ::after 他們的父類都是宿主元素. canvas我感覺有點大材小用，用css完全可以實現。

1.帶圖切是一種辦法。
2.或用佈局的額外p做定位，用border：1px dashed ＃000，來做樣式。 。即可。
3.用css偽類來實作。

如果是IE8以後的瀏覽器用偽類來實作

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

如果相容以前的瀏覽器就只能用p來模擬一波了，看你個人需求。

支持用 canvas 的同學，退一步可以用圖片來切圖。

先使用ul li float浮動，再寫一個類.bg{position:relitive},寫兩個偽類，分別為橫線和豎線，根據設計稿進行定位就好了