如图，左侧环节这边的竖线如何连起来，右侧的点数不固定，尺寸就不固定，右侧点和线效果我已经实现，整个内容都是动态生成的

采用盒子（内容部分）的左边框实现线条，使用伪元素实现小点位置相对父父元素来进行定位

这种竖线效果如何实现呢

css就可以实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      html, body{
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      }
    #box{
        width: 300px;
        height: 100%;
        overflow: auto;
        padding: 20px;
    }
    .pitem{
        padding: 30px;
        padding-left: 60px;
        border-left: 3px solid #1D6DE5;
        position: relative;
    }
    .pitem:last-child{
        border-left-color: transparent;
    }
    .pitem .name{
        position: absolute;
        top: -2px;
        left: 8px;
        font-size: 12px;
    }
    .pitem .node{
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid #1D6DE5;
        background: #fff;
        border-radius: 50%;
        top: 0;
        left: -8px;
    }
    .pitem .node:after{
        content: '';
        position: absolute;
        width: 2px;
        height: 2px;
        background: #1D6DE5;
        top: calc(50% - 1px);
        left: calc(50% - 1px);
        border-radius: 50%;
    }
    .citem{
        height: 30px;
        border-left: 2px solid #1D6DE5;
        position: relative;
    }
    .citem:after, .citem:before{
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: #1D6DE5;
        border-radius: 50%;
        left: -5px;
    }
    .citem:before{
        top: -4px;
    }
    .citem:after{
        bottom: -4px;
    }
  </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    //生成元素
    let arr = [4, 3, 5, 2]
    document.getElementById('box').innerHTML = arr.map(item => {
        let html = ''
        for(let i = 0; i < item; i++){
            html += '<div class="citem"></div>'
        }
        return `<div class="pitem"><div class="node"></div><div class="name">环节:</div>${html}</div>`
    }).join('')

</script>
</html>

可以光明正大地贴一个自己做的方案了：易锦教育-职业体系课程-安卓逆向工程师。
我用的是伪元素，通过绝对定位偏移到左边，.part-index 的伪元素用来显示圆圈，.chapter-wrapper的伪元素用来显示时间轴。
一个知识点：只有元素本身有定位（比如position: relative），其伪元素才能相对该元素进行定位和设置宽高。
时间轴线高度：.chapter-wrapper 的高度是被课程列表撑开的，然后给 .chapter-wrapper 设置 position:relative，给伪元素设置 position:absolute，这样伪元素就可以设置高度值为百分比（我用的是给定top和bottom让它自己计算的方法），然后位置稍微调节一下就可以了。

这种竖线效果如何实现呢

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

图片沿着圆环的转动有什么方法吗？

点击dom节点里面的子元素，如何点击的是某个节点？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？