流程图竖线css的实现

流程图竖线css的实现

在开发过程中会经常遇到流程模块的功能 ，今天就来说下css如何实现如下图所示的左侧流程标记~

<div class="os" style="width :100px ; height :100px ; border:1px solid black ;margin-top : 50px;" >
      <div class="orl"></div>
  </div>

css样式

.orl{
  width: 3px;
  height: 3px;
  border: 1px orangered solid;
  border-radius: 4px;
}
.os{
  position: relative;
}
.orl::after{
  content: "";
  width: 1px;
  height: calc(100% - 30px );
  border-left: 1px black dotted;
  position: absolute;
  top:7px ;
  left: 2px;
}

给圆圈设置伪元素来完成竖向点线的实现
伪元素继承父元素的高度 给想要继承的父元素加相对定位 伪元素加绝对定位 实现 竖向点线随父元素高度变化而变化的效果

注意：
有些移动端在处理小半径圆圈不是很友好 所以会出现圆圈会扁的情况
这个时候 我们可以通过缩放来实现

transfrom  : scal(0.5)

完美解决小半径问题