用 CSS 画流程箭头
正文
感谢 CSS 的发展,让 Web 前端工程师可以完成以前需要切图才能实现的设计效果。最近遇到一个需求:用 CSS 画流程箭头。具体的效果图如下所示:
这要放到 CSS2.1 的年代或者想偷懒的话,直接三个切图搞定。但是切图无疑会增加页面的体积,减慢页面的加载速度。更何况,这几个切图的效果完全用 CSS 来搞定。
- 正如上图所示,整个过程分为三部分(第一步、第二步、第三步);
- 不同部分拥有不同效果的箭头;不同部分之间存在白色间隔(红圈圈)。
当我决定用 CSS 来完成设计效果时,我认为实现上图效果的难点在于:箭头和不同部分之间的间隔。
其实呢,整个流程既然分为三部分,那么把三部分单独列出来的话,问题就会很清晰了:
第一步的右箭头插入第二步的左侧,第二步的右箭头插入第三步的左侧,第三步是带有圆角的矩形。
我们再将问题细化,首先解决“画箭头”的问题。
箭头
对于“箭头”这些 CSS 无法直接绘制的形状,通常的解决思路是“拼接”。如下图所示:
或者
通常决定使用“拼接”时,其实是配合 position: absolute
,使用 :after
与 :before
。
从上面的 Demo 的代码可以看出,两种实现方式的具体方式(分别记为:三角方法一、三角方法二):
- border 模拟三角形;
- 正方形旋转,被切掉一半。
间隔
箭头的问题解决了,那么我们就把三个部分组合起来。
除了没有间隔以外,简直完美。那么,什么属性可以设置或者模拟间隔呢?(分别记为:间隔方法一、间隔方法二)
border
box-shadow
比较遗憾的是, 三角方法一
是无法再绘制出间隔的。三角方法二
是可以用 间隔方法一
、 间隔方法二
。
如下 Demo 所示:
总结
- 将设计效果分为三部分,再讲每部分进行拆分;
- CSS 无法直接搞定的效果,通常需要拼接来解决。
参考
- The Shapes of CSS
- border
- box-shadow
- 《CSS 揭秘》
工具
以上。