创建由直线连接的CSS3圆

我必须在CSS中实现下面的圆圈和线条组合，我正在寻找如何有效实现这一点的指针。圆圈和线条应如下所示：

我能够实现如下循环：

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

但是台词对我来说很难理解

---

圆的大小根据是否为活动步骤而变化，连接圆的线的颜色也根据状态而变化。我将如何实现这一点？

好吧，这是一大堆标记，但您可以这样做：

使用

显示：表格单元格因为它会自动调整项目的宽度以填充空间

然后，有一组圆元素和一组线元素。线条元素上只有一个底边，而圆形元素只是相对向下定位以与线条对齐

请注意，圆需要有一个额外的容器，否则
表格单元格
会将所有圆拉伸到相同的高度，您不希望这样。这将要求您将这些容器的宽度设置为1px，这将强制其与子容器的大小相同

查看此演示：

使用伪元素和相邻的同级选择器（
~
）无需额外标记即可实现此效果：



li{
宽度：2米；
高度：2米；
文本对齐：居中；
线高：2米；
边界半径：1米；
背景：道奇蓝；
边缘：0 1米；
显示：内联块；
颜色：白色；
位置：相对位置；
}
李：以前{
内容：''；
位置：绝对位置；
顶部：.9em；
左：-4em；
宽度：4em；
高度：.2米；
背景：道奇蓝；
z指数：-1；
}
李：第一个孩子：以前{
显示：无；
}
.主动{
背景：道奇蓝；
}
.active~li{
背景：浅蓝色；
}
.active~li：：之前{
背景：浅蓝色；
}

一,
二,
三,
4
五,
六,
七,
虽然这在CSS3中是可能的，但我认为SVG对于复杂的接口来说是一个更好的工具

我是用SVG（用CSS设计）做的：


这是。


在使用优秀的@bookcasey时，我发现自己的做法与之相反，目的是让它具有响应性


我把圆圈放在

伪选择器（带有自动css计数器）前面

之间的线是

li

元素，因此它们可以通过flexbox拉伸

它现在可以拉伸以填充父对象，并自动处理不同数量的步骤。您还可以在父级

ul

上调整

font size

等操作，并使整个操作适应

我相信它可以改进，所以请随意贡献：）

---

交互式代码笔：Flexbox时间线，包括步骤：

---

ul{
对齐内容：居中对齐；
对齐项目：居中；
计数器复位：步数；
显示器：flex；
证明内容：周围的空间；
余量：10vh自动20vh；/*用于代码笔*/
}
李{
背景：道奇蓝；
颜色：白色；
内容：''；
显示器：flex；
柔性生长：1；
高度：.3em；
线高：1米；
保证金：0；
位置：相对位置；
文本对齐：右对齐；
z指数：-1；
}
李：以前{
背景：道奇蓝；
边界半径：50%；
颜色：白色；
内容：计数器（步数）；
计数器增量：步数；
高度：2米；
左：-2米；
线高：2米；
位置：绝对位置；
文本对齐：居中；
顶部：-.85em；
宽度：2米；
}
李：很活跃{
背景颜色：浅蓝色；
}
李。活跃~李{
背景颜色：浅蓝色；
}
li.active~li：：之前{
背景颜色：浅蓝色；
}
李：最后一个孩子{
flex-grow:0；
弹性收缩：1；
弹性基准：0；
/*速记：flex:0110*/
}
更大{
字体大小：1.3em；
}
ul.highlight-active li.active:：before{
字号：1.6em；
背景：海军；
}
罗曼·李：以前{
内容：计数器（步数，上罗马）；
}
李：以前{
宽度：0；
身高：0；
边界半径：0；
左边框：1米纯白；
右边框：1米纯白；
边框底部：.8em实心道奇蓝；
内容：''；
顶部：-.65em；
}
李：第一个孩子：：之前{
左：0；
}
ul.triangle li.active~li:：before{
边框底色：浅蓝色；
}

这不是我自己的，但它工作得很好，看起来很优雅， 仅适用于css，您可以对其进行更多的分区。来源

var i=1；
$（'.progress.circle'）.removeClass（）.addClass（'circle'）；
$（'.progress.bar'）.removeClass（）.addClass（'bar'）；
setInterval（函数（）{
$（'.progress.circle:n类型（'+i+'））.addClass（'active'）；
$（'.progress.circle:n类型（'+（i-1）+'））.removeClass（'active'）.addClass（'done'）；
$（'.progress.circle:n类型（'+（i-1）+'.label'）.html（'✓；'）；
$（'.progress.bar:n类型（'+（i-1）+'））.addClass（'active'）；
$（'.progress.bar:nth类型（'+（i-2）+'））.removeClass（'active'）.addClass（'done'）；
i++；
如果（i==8）{
$（'.progress.circle'）.removeClass（）.addClass（'circle'）；
$（'.progress.bar'）.removeClass（）.addClass（'bar'）；
i=1；
}
}, 1000);
*，
*：之后，
*：之前{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“开放式SAN”；
}
/*形成过程*/
.进展{
保证金：20px自动；
文本对齐：居中；
填充底部：80px；
}
.进步，循环，
.进展。
Pug
ul
  li.list.active 1
  li.list 2
  li.list 3
  li.list 4
Sass
ul
  list-style: none
    li
      display: inline-block
      width: 4rem
      height: 4rem
      line-height: 4rem
      border-radius: 100%
      background: #d8d8d8
      margin-right: 2rem
      position: relative
      &:first-child
        margin-left: unset
        &:before
          display: none
      &:before
        content: ''
        width: 2.4rem
        background-color: #d8d8d8
        height: 2px
        position: absolute
        top: 2rem
        right: 3.9rem
    .active
      background: #03A9F4
      color: #fff
      &:before
        background-color: #03A9F4

<style>
.line-btw { 
  height:3px;
  width:100px;
  background-color: orange;
}
</style>

<div class="fa-stack fa-lg text-center">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>1</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div style=""><b>2</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>3</b></div>
</div>