流程图竖线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)

完美解决小半径问题