使用 CSS 的垂直进度步骤答案

【问题标题】：Vertical Progress Steps with CSS使用 CSS 的垂直进度步骤
【发布时间】：2018-10-25 11:59:33
【问题描述】：

我有反应组件从火车上打印行程，我需要用这样的垂直线统一圆圈：

我需要统一这些节点（带有竖线的圆圈）并且正在寻找一个想法。我正在使用 flex，并且正在使用包含 3 个子组件（一个带有时间，一个带有节点 - 圆圈，一个带有 Station 和实时）的 react 组件来渲染项目。

我必须从头开始编写 css（使用最大的 flexbox 或网格）。

提前谢谢你。

【问题讨论】：

添加最小的html和css
也许您可以使用
- 标签并为项目符号点设置自定义图像图标..
如何使用这些组件：ahlechandre.github.io/mdl-stepper
问题是我需要一个未排序的步进器，例如起点和目的地的背景为黑色，火车的位置用图标标记。所有这一切都已经从头开始。我只需要知道如何用一条垂直线统一所有这些节点。

标签： reactjs css flexbox responsive

【解决方案1】：

可以使用带边框半径的 div 和两个圆形 div 绘制圆圈，并由另一个 div 分隔，并突出显示侧边框颜色。

【讨论】：

我已经绘制并定位了圆圈，唯一剩下的就是通过一条连接所有圆圈的垂直线。其余的都处理好了。不过谢谢！
是的，这可以在 div 之间用边框颜色绘制。
使用css动画关键帧显示绘图动画比添加带边框半径的div更棒

【解决方案2】：

我的尝试。

我会使用无序列表，其中时间和描述是flexbox 列表项的子项。使用伪元素（适当堆叠）可以轻松绘制点和垂直线。

.events li { 
  display: flex; 
  color: #999;
}

.events time { 
  position: relative;
  padding: 0 1.5em;  }

.events time::after { 
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border: 1px #ccc solid;
   width: .8em;
   height: .8em;
}


.events span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}

.events span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 1px #ccc solid;
}

.events strong {
   display: block;
   font-weight: bolder;
}

.events { margin: 1em; width: 50%; }
.events, 
.events *::before, 
.events *::after { box-sizing: border-box; font-family: arial; }

<ul class="events">
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
    
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time and other text that may span over 2 lines</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
</ul>

【讨论】：

【解决方案3】：

您可以像这样在包装器上使用边框：

.timeline-wrapper {
  margin-left: 1.5rem;
  border-left: 3px solid #ddd;
}
.node {
  padding-left: .5rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.node h3, .node p {
  margin: 0;
}
.node::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: .3rem;
  left: -.5rem;
}

<div class="timeline-wrapper">
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
  <div class="node">
    <h3>Title</h3>
    <p>Status / Time</p>
  </div>
</div>

【讨论】：