HTML CSS锯齿形绘制方法大全

没有“万能”的锯齿边框，CSS全靠“演”

先抛个结论——CSS里压根儿不存在什么“通用锯齿边框”属性。你看到的所有锯齿效果，本质上都是视觉模拟。选错实现方式，轻则布局乱套，重则响应式失效，后期维护起来更是头疼。

下面这张图能让你对几种主流方案有个直观印象：

关键点先记住：没有现成的CSS属性，所有方案都是视觉模拟——选错方法，后面全是补丁。

clip-path: polygon() 画锯齿圆，坐标千万别对不上

用 clip-path: polygon() 来拼锯齿圆？本质上就是手动列出一圈顶点的坐标。但这里面坑不少：坐标点数是奇数、首尾没闭合、百分比跑出0–100%范围——随便一个错误，图形直接塌陷或显示为空。

几个核心要点：

• 坐标必须成对对称。顶部和底部的锯齿数量得一致，否则圆会歪歪扭扭。
• 每个锯齿由两个相邻点定义（比如 60% 5% 到 70% 0%），中间那个“尖角”全靠第三个点撑起来。
• 改锯齿大小时，千万别只调单个坐标的偏移量。比如把 5% 改成 10%，上下立马不对称。正确的做法是同步调整对称位置的值。
• 兼容性方面：Safari 15.4+ 和 Chrome 102+ 都很稳定，但 Firefox 对 clip-path 的 polygon() 百分比解析偶尔会抽风。建议加一句 transform: scale(0.999) 触发重绘，能有效规避。

mask-image + repeating-linear-gradient 做底部锯齿，最稳的方案

如果只是在元素底部加锯齿边框，mask-image 是目前兼容性与可控性平衡得最好的方式。它不侵占布局流，不依赖伪元素定位，还支持缩放和动画。

实际操作时，有几个细节需要留意：

• 核心代码里的角度和断点必须严格匹配 mask-size。比如 repeating-linear-gradient(-45deg, transparent 0 10px, black 10px 20px)，你把 20px 20px 改成 30px 30px 却没调渐变断点，锯齿立马拉长变形。
• 锯齿方向由渐变角度决定：-45deg 得到右下斜齿，45deg 得到左下斜齿，0deg 则是水平齿——不过水平齿看起来会有点生硬。
• 兼容性是个坎：IE 完全不支持 mask-image，Edge 16–18 得加 -webkit- 前缀。如果需要兼容旧浏览器，只能 fallback 到 ::after 伪元素方案。
• mask 默认作用于整个元素。如果你只想要底部锯齿，必须配上 mask-position: 0 100%。漏写这一句，整个元素都会变成锯齿，画面太美不敢看。

::before/::after 伪元素拼锯齿，小心脱标和重绘抖动

用两个伪元素分别画上、下锯齿，适合需要独立配色或 hover 动画的场景。但问题也很明显：position: absolute 脱离文档流后，父容器高度塌陷是家常便饭。

几个防坑指南：

• 父元素必须设 position: relative，否则伪元素会相对于 body 定位，结果就是整个世界都乱套了。
• 锯齿高度和背景渐变的 background-size 必须严格对应。比如 height: 12px 和 background-size 不匹配，就会出现齿距错位或空白缺口。
• 多个锯齿块拼接时，background-repeat: repeat-x 要配合 background-position 对齐起点，否则首尾会露白缝，看着就像排版事故。
• 滚动或缩放时，Chrome 下偶发伪元素重绘延迟，表现为锯齿闪烁。可以加 will-change: transform 或临时套一层 transform: translateZ(0) 强制 GPU 加速，能有效解决。

Canvas 绘制锯齿矩形，动态需求的最优解

当锯齿需要随数据变化（比如进度条齿数实时增减），或者要求像素级对齐（比如打印导出），CSS 方案会力不从心。这时候，Canvas 是唯一可靠的选择。

需要注意的技术细节：

• 别指望 strokeRect() 能画出锯齿——它只能描个矩形边框。正确的做法是用 beginPath() + lineTo() 手动连点，或者用 arc() 在角上画半圆齿。
• Canvas 坐标系 y 轴是向下的。设置 arc(x, 5, 5, ...) 表示顶部小圆齿，arc(x, height-5, 5, ...) 才是底部齿。搞反了方向，锯齿就跑到天上去了。
• 响应式场景下，必须监听 window.resize 并重新调用 canvas.width = canvas.offsetWidth 和重绘，否则锯齿会糊或错位。
• Canvas 内容无法被 CSS 选择器选中，也不能继承父元素字体/颜色。所有样式都得在 JS 里硬编码，灵活性大打折扣。

说到底，真正难的不是画出锯齿，而是判断它该出现在哪一层。是作为装饰边框（用 mask-image），还是结构化组件的一部分（用 clip-path），又或者承载交互逻辑（用 canvas）。选错层级，后面全是补丁。我的建议是：先想清楚应用场景，再决定用什么方案。