步骤条

Posted on

最近有个项目是优化员工信息采集，其中比较有意思的是改进步骤条，步骤条的逻辑上没特别的，做好分段，到达每个段落点亮对应的步骤条就好了，再复杂一点的无非就是存在三种样式，，正在编辑的步骤显示一种样式，已完成编辑的显示一种样式，未完成的显示一种样式，做好判断即可。
有意思的地方在于步骤条的样式多样化，查看ant-design步骤条，以及element-ui步骤条，给的都是简单的圆圈样式，步骤之间隔离无交集，走到当前的步骤时填充下背景色就好。

无交集步骤条图片

接手的项目之前也是这种步骤条，现在要优化样式如下：

有交集步骤条图片

步骤之间存在交集了，样式上来说，两个步骤之间有白色的间隔，但是前一个步骤插到了后一个步骤里

万能的搜索，找到的结果都是利用图片，两个步骤之间用图片做背景，我大概截了几个图，凑合看一下

步骤条间隔图片

步骤条间隔图片

步骤条间隔图片

每个步骤后部分用相应的图片做背景，切换步骤的时候在变换对应的步骤背景色的同时也要更换背景图片，这样确实能实现，问题是如果样式作变动，每次更改都要做几个这样的图，我上面截了三个图，对应的情况是已完成的和正在编辑的步骤样式一样，如果不一样，那就需要4个图，这样很麻烦且不好复用

抛开图片来解决，每个步骤就是独立的一块元素，重点解决中间叠合部分，向外凸起的尖角可以利用linear-gradient

html代码就是个div，核心CSS代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
display:inline-block;
width:440px;
height:80px;
background-color:#ec9536;
color:white;
text-align:center;
font-size:20px;
background:linear-gradient(-135deg, transparent 28px, #ec9536 0) top right,
	linear-gradient(-45deg, transparent 28px, #ec9536 0) bottom right;
background-size:50% 50%;
background-repeat:no-repeat;
padding-left:220px;
psdding-right:40px;
margin-left:-220px

最终效果如下


单元

如果多个单元排排列（外层包了一层div，然后做了定位）的情况如下


单元


单元


单元

中间步骤的头部都有个向内部的缺角，这部分我的解决方式是，在步骤之间加一个底色的凸起角的单元，然后叠加覆盖在右侧步骤单元上，使其显示有缺角，整体上就是单元一个一个叠加

最后提炼一下CSS，步骤单元共有的样式如下，默认没走过的步骤是灰色的，（最外层div设置relative定位，内部元素都是绝对定位）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
width:60%;
height:70px;
background-color:#a5a5a5;
color:white;
text-align:center;
font-size:20px;
line-height:25px;
background:linear-gradient(-135deg, transparent 25px, #a5a5a5 0) top right,
	linear-gradient(-45deg, transparent 25px, #a5a5a5 0) bottom right;
background-size:50% 50%;
background-repeat:no-repeat;
padding-left:30%;
margin-left:-30%;
position:absolute

中间过渡的底色单元样式是：

1
2
3
background-color:white;
background:linear-gradient(-135deg, transparent 25px, white 0) top right,
	linear-gradient(-45deg, transparent 25px, white 0) bottom right;

每个步骤单元有自己的z-index和定位的具体位置，例如第一个单元是

1
2
3
4
z-index:1000;
top:0;
left:0;
padding-right:35px

因为第一个没有向内凹的尖角，为了展示内容居中，加了个padding-right

第二个单元是过渡单元，如下

1
2
3
z-index:999;
top:0;
left:25px;

第三个单元是

1
2
3
z-index:998;
top:0;
left:calc(30%-10px)

第四个还是过渡单元，如下

1
2
3
z-index:997;
top:0;
left:calc(30%+15px)

第五个单元是

1
2
3
z-index:996;
top:0;
left:calc(60%-20px)

依次类推，定位的距离需要自己计算，例如突出尖角的部分长度为35px，设定的过渡单元和前一个单元距离是25px（就是空白的距离），那么过渡单元的定位都是基于前一个单元的定位+25px，所以第一个过渡单元的定位是25px，步骤单元的定位都是基于前一个过渡单元的定位+单元本身的长度-35px，所以第二个步骤单元的定位是25px+30%-35px=30%-10px，以此类推，下一个过渡单元定位是30%-10px+25px=30%+15px，下一个步骤单元定位是30%+15px+30%-35px=60%-20px，为方便直接用calc

以上做为基本样式后，已经走过的步骤和当前的步骤样式如下，（之后切换此样式来改变即可）

1
2
3
4
background-color:#ec9536;
background:linear-gradient(-135deg, transparent 25px, #ec9536 0) top right,
	linear-gradient(-45deg, transparent 25px, #ec9536 0) bottom right;
position:absolute;

最终的效果如下（假装当前就是第一个步骤）


1


1


2


2


3

以上完成了需求，但是事情永远没有那么简单，在我暗暗自喜自己的设计很完美，完全可以应对随便改颜色时，产品经理给我了一份新的设计，步骤条变成了这样

新步骤条图片

有一句妈卖批不知当讲不当讲。。。

整体逻辑可以照搬，得重新做下突出尖角，具体做法借鉴出处Nicolas Gallagher，具体可以看一下，这里我直接写成我的需求样式啦

同样先来个单元，html是个p元素，class是step-card-interval

主要CSS如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.step-card-interval{
    background: #63ca9b;
    color:white;
    position: absolute;
    padding: 15px;
    margin: 0;
    text-align: center;
    font-size:16px;
    width:200px;
}
.step-card-interval:after{
    content: "";
    position: absolute;
    border-style: solid;
    top: 21px;
    right: -8px;
    border-width: 8px 0 8px 8px;
    border-color: transparent #63ca9b;
}

单元

出来单元就OK了，剩下的同样是单元堆叠

不想写啦～～～

前阵子有个朋友问怎么做等边三角形，我当时说啥？等边三角形？不会啊，这里后面的情况明明就做出了等边三角形的（(๑°⌓°๑)）