需求desc：
与常规步骤条不同的是 各个步骤之间没间隔 连在一起
需求分析
- 常规样式实现
- hover样式实现
- 当第一个元素的时候 hover需要高亮 当第二个元素的时候 hover前后边框高亮 这里会有一个问题 相邻元素之间占据有相同边框 点击样式同
- 点击样式实现
我的实现
- 对于折线的处理 我是使用菱形拼接 对于一个Item 使用伪元素在前后都拼接一个菱形 （起初想使用三角形 实现折线 但是如果使用三角形的话 好像无法在伪元素中使用 就实现不了hover样式了）
height: 35px;
width: 35.5px;
border: 1px solid #e5e5e5;
transform: rotateZ(45deg) skew(15deg, 15deg);
background-color: transparent;
border-left: none;
border-bottom: none;
content: "";
position: absolute;
top: 13px;
left: -18px;
- 使用菱形 同样会遇到与边框连接处有突出问题 做的时候我细调了两种方式
- 1是给菱形圆角
- 2是细调 宽高和定位 这种方式对我效果更好 所以选择了这种
- 对于hover和点击效果 就是不同情况下给不同的样式
最终实现
- 总共使用了100多行的css代码
- 对于这个需求 觉得比较麻烦 自己的实现方式应该很笨重
- 想问问大家 有没有更好的实现方式
- 对于不确定角度的折线怎么实现？
- 对于hover和点击样式怎么更方便的控制？
- 目前还有手机端 如果放到手机端 还是采用这种定位的方式拼接菱形 恐怕会因为兼容而无法达到统一效果
总之 就是想得到一种更好的实现方式 自己实在是太局限 欢迎大家给予指导
