用现代 CSS 画流程图：anchor 定位、shape() 与 border-shape
来源：blog.master.dev — 2026-11-11
📋 概述
Temani Afif 的 CSS 图形系列第三篇，讲怎么只用 CSS 把两个元素连起来：动态连线会判断最近的是哪条边、太近时改连中心，靠 hypot() 算对角线距离决定；静态连线固定右连左，靠 anchor 配置与 scale 翻转覆盖四个区域。关键不是画线，而是让相邻区域之间形状「连续」，才能骗过眼睛看成一条线。所有特性目前只在 Chrome 与 Edge 完整可用。
🔑 核心要点
- 动态连线用 hypot(100cqw,100cqh) 比较对角线距离，决定连中心还是连最近的边
- 四个区域各一套 shape()，靠 border-shape 里的 if(style(...)) 切换
- 静态连线不需要知道元素尺寸，但失去对称性，只有 C、D 需要 scale 1 -1
- 核心技巧是「连续性」：区域切换时曲线必须重合，否则会看出四条不同的线
- 还能在 shape() 内部再嵌 if()，比写两套 shape 更省代码
- 附赠弹簧、锯齿、随距离变细的直线等 demo，作者明说都不是生产可用
💡 金句
我们已经可以用 CSS 画出连 SVG 都不容易做出的复杂连线。
← 返回 Lobsters 首页
👍 0
👎 0