Html 创建从上到下用线连接的CSS圆形步骤

我已经想好了水平旋转的步骤。但是要像下面的图片那样做是相当有压力的。你能想出怎么做吗

这是代码

。容器进程{
保证金：100像素自动；
字体大小：24px；
字体大小：粗体；
字体系列：Verdana；
颜色：白色；
边缘顶部：50px；
填充：0；
}
.progressbar{
保证金：0；
填充：0；
计数器复位：步骤；
}
李先生{
列表样式类型：无；
宽度：16%；
浮动：左；
字体大小：12px；
位置：相对位置；
文本对齐：居中；
文本转换：大写；
}
李：以前{
宽度：5em；
身高：5公分；
内容：计数器（步骤）；
反增量：步进；
线高：90px；
边框：2px实心#7d7d；
显示：块；
文本对齐：居中；
保证金：0自动10px自动；
填充：0；
边界半径：50%；
背景色：黑色；
字号：18px；
字体大小：粗体；
}
李：之后呢{
边缘顶部：30px；
宽度：100%；
高度：.5em；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：15px；
左-50%；
z指数：-1；
}
李：第一个孩子：之后{
内容：无；
}
.progressbar li.active{
颜色：白色；
}
.progressbar li.活动：之前{
边框颜色：淡蓝色；
背景：道奇蓝；
}
.progressbar li.active+li:after{
/*背景色：淡蓝色*/
}
.进度条标签{
颜色：黑色；
}

第一步


步骤2


步骤3


步骤4


步骤5


步骤6

这使用

ul

上的边框来创建连接线，并使用

位置：绝对

来定位各个步骤。你可能需要再调整一下，但它可以让你朝着正确的方向前进

编辑

要获得显示在电路上方的前三个标签，请将

：before

与

：after

交换。我已经更新了代码以反映这一点

。容器进程{
保证金：100像素自动；
字体大小：24px；
字体大小：粗体；
字体系列：Verdana；
颜色：白色；
边缘顶部：50px；
填充：0；
}
.progressbar{
边际：0.50px；
填充：0；
计数器复位：步骤；
位置：相对位置；
边框：2px实心#7d7d；
左边界：无；
最小高度：200px；
}
李先生{
列表样式类型：无；
宽度：16%；
/*浮动：左*/
字体大小：12px；
位置：绝对位置；
文本对齐：居中；
文本转换：大写；
}
/*前三名*/
.progressbar li:第n个孩子（-n+3）
{
顶部：-45px
}
/*最后三个*/
.progressbar li:n最后一个孩子（-n+3）
{
底部：-75px
}
/*左*/
.progressbar li:第n个孩子（1），.progressbar li:第n个孩子（6）
{
左：-45px
}
/*中间的*/
.progressbar li:第n个孩子（2），.progressbar li:第n个孩子（5）
{
左：计算（50%-45px）；
}
/*对*/
.progressbar li:第n个孩子（3），.progressbar li:第n个孩子（4）
{
左：计算（100%-45px）；
}
.progressbar li:n最后一个子项（-n+3）：之前，.progressbar li:n最后一个子项（-n+3）：之后{
宽度：5em；
身高：5公分；
内容：计数器（步骤）；
反增量：步进；
线高：90px；
边框：2px实心#7d7d；
显示：块；
文本对齐：居中；
保证金：0自动10px自动；
填充：0；
边界半径：50%；
背景色：黑色；
字号：18px；
字体大小：粗体；
}
/*李：之后呢{
边缘顶部：30px；
宽度：100%；
高度：.5em；
内容：''；
位置：绝对位置；
背景色：#7d7d7d；
顶部：15px；
左-50%；
z指数：-1；
}*/
/*李：第一个孩子：之后{
内容：无；
}*/
.progressbar li.active{
颜色：白色；
}
.progressbar li.活动：之前，.progressbar li.活动：之后{
边框颜色：淡蓝色；
背景：道奇蓝；
}
.progressbar li.active+li:after{
/*背景色：淡蓝色*/
}
.进度条标签{
颜色：黑色；
}

第一步


步骤2


步骤3


步骤4


步骤5


步骤6

由于您的标签是

html

和

css

，您可能应该分享这些标签的当前工作示例，以支持您的问题并获得更直接的帮助。最好是一个代码片段。试试这把小提琴不错的工作我删除了我的答案，因为这似乎工作得很好。我只是在玩弄东西，忙着其他事情。我很高兴你能完成一些事情：）很好的代码。我也得到了这种解决方法，但代码不同。只有恼人的部分是标签步骤1、2和3应该在圆圈上方。怎么做？非常感谢你。。