問(wèn)題描述

如下圖

問(wèn)題解答

將每四個(gè)圈看作一個(gè)矩形的四個(gè)頂點(diǎn)，虛線則可以用 border-style dashed 來(lái)實(shí)現(xiàn)。

然后整個(gè)頁(yè)面就是由一個(gè)個(gè)這樣的矩形豎向堆起來(lái)，每個(gè)矩形里放兩個(gè)頂點(diǎn)，分別絕對(duì)定位放到矩形的左上角和右上角。

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

沒(méi)有純橫豎的遞進(jìn)關(guān)係，看起來(lái)十分彆扭。各層的關(guān)係不是用指針去關(guān)聯(lián)而是看下面的步數(shù)，差評(píng)。而且出現(xiàn)兩個(gè)暗背景流程說(shuō)明，不知用意總體體驗(yàn)太差，尤其說(shuō)明流程左右太狹隘，好影響用戶的關(guān)注。

background-imagecanvas偽類

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

width || height : calc 動(dòng)態(tài)計(jì)算線條寬度， 這個(gè)黑色線條可以使用偽元素，::before ::after 他們的父類都是宿主元素. canvas我感覺(jué)有點(diǎn)大材小用，用css完全可以實(shí)現(xiàn)。

1.帶圖切是一種辦法。2.或者用布局的額外p做定位，用border：1px dashed ＃000，來(lái)做樣式。。即可。3.用css偽類來(lái)實(shí)現(xiàn)。

如果是IE8以后的瀏覽器用偽類來(lái)實(shí)現(xiàn)

p:after { content : ''; display : block; position:absolute; background : url(); //把圖片換好就行，如果支持css3的話一張圖片就行了，可以自行旋轉(zhuǎn)}

如果兼容以前的瀏覽器就只能用p來(lái)模擬一波了，看你個(gè)人需求。

支持用 canvas 的同學(xué)，退一步可以用圖片來(lái)切圖。

先使用ul li float浮動(dòng)，再寫一個(gè)類.bg{position:relitive},寫倆個(gè)偽類，分別為橫線和豎線，根據(jù)設(shè)計(jì)稿進(jìn)行定位就好了