阶段式箭头样式

需求，UI图所示：
第一种状态

第二种状态

第三种状态

html代码：

<ul class=\"arrowBox\"><li class=\"arrow\"><span>第一步</span><span>编辑文件</span></li><li class=\"arrow1\"><span>第二步</span><span>邀请投标人</span></li><li class=\"arrow2\"><span>第三步</span><span>发布招标公布</span></li></ul>

第一张图的样式：

.arrowBox {display: flex;justify-content: center;.arrow {width: 290px;height: 36px;color: #fff;background-color: #8091DF;position: relative;line-height: 36px;&::after {content: \' \';height: 0;top: 0px;right: -44px;position: absolute;width: 0;display: inline-block;border-top: 18px solid transparent;border-left: 44px solid #8091DF;border-bottom: 18px solid transparent;z-index: 100;}}.arrow1 {width: 290px;height: 36px;color: #181818;background-color: #eee;position: relative;line-height: 36px;margin-left: 14px;&::before {content: \' \';height: 0;top: 0px;left: 0px;position: absolute;width: 0;display: inline-block;border-top: 18px solid transparent;border-left: 45px solid #fff;border-bottom: 18px solid transparent;z-index: 9;}&::after {content: \' \';height: 0;top: 0px;right: -44px;position: absolute;width: 0;display: inline-block;border-top: 18px solid transparent;border-left: 44px solid #eee;border-bottom: 18px solid transparent;z-index: 99;}}.arrow2 {width: 290px;height: 36px;color: #181818;background-color: #eee;position: relative;line-height: 36px;margin-left: 14px;&::before {content: \' \';height: 0;top: 0px;left: 0px;position: absolute;width: 0;display: inline-block;border-top: 18px solid transparent;border-left: 45px solid #fff;border-bottom: 18px solid transparent;z-index: 9;}}}

思路整理：刚开始只是单纯的根据ui图做出来了整体样式，但是发现空白的间隔调不出来，后面被一朋友的指点，自己有灵光一闪，想出了再加一个小山角，比如第一张图：第一个li元素给了伪类放在后面，层级最高，第二个盒子给前后伪类，前伪类层级比父盒子高并且比第一个盒子的伪类层级低，第三个盒子加前伪类就行了，道理跟第二个差不多！

改变思路，事半功倍！