polygon()坐标应统一用百分比、按顺时针/逆时针闭合书写，基于border-box基准，避免混用单位和漏闭合导致偏移变形。
直接用 clip-path 的 polygon() 函数，是当前最轻量、语义清晰、无需 JS 也能响应式的多边形裁剪方案。IE 不支持，但 Chrome 73+、Firefox 68+、Safari 15.4+ 均已稳定可用。
怎么写 polygon() 坐标才不偏移、不变形
polygon() 的每个点坐标默认基于元素自身的 border-box，单位用百分比最安全（如 50% 0% 表示上中点），避免像素值导致缩放失真。坐标顺序必须顺时针或逆时针闭合，首尾不必重复；若漏掉闭合点，浏览器会自动连线，但可能出意外形状。
- 错误写法：
polygon(0 0, 100px 0, 100px 100px)→ 第三点后没回起点，且混用px和 %，缩放时错位 - 推荐写法：
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)（矩形，等效无裁剪） - 五角星示例：
polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
为什么图片裁不齐？常见 DOM 和 CSS 陷阱
裁剪失效往往不是 polygon() 写错，而是容器或图片本身干扰了盒模型。关键点：裁剪作用于整个元素盒（包括 padding/border），但图片若用 background-image，clip-path 对它无效 —— 必须用 <img> 标签。
-
<div style="background: url(...)"></div>+clip-path→ ❌ 不生效 -
<img src="..." style="clip-path: polygon(...)">→ ✅ 正确 - 父容器设了
overflow: hidden，又叠加clip-path→ 可能双重裁剪，行为不可控，建议只留其一 - 图片宽高未固定（如
width: auto），导致百分比坐标基准漂移 → 显式设width/height或用aspect-ratio
复杂多边形要不要上 SVG clipPath？
纯 CSS polygon() 足够应付大多数场景（菱形、六边形、星形、波浪顶等），但遇到以下情况，该切到 SVG <clipPath>：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4 之前不支持
clip-path: path("M...")，而你需要贝塞尔曲线路径 - 需要和文字轮廓、图标路径复用同一套矢量定义（比如 logo 抠图）
- 要求裁剪区随元素缩放严格保持比例 → 设
clipPathUnits="objectBoundingBox"，此时坐标范围是 0–1（如cx="0.5" r="0.3"） - 必须嵌套多个图形做“挖空”效果（如环形、带镂空的徽章），靠
clip-rule="evenodd"
注意：<clipPath> 必须放在 <defs> 内，引用时用 clip-path: url(#myClip)，且仅对同域内 SVG 元素或 HTML 元素（支持情况下）有效。
动画和响应式要注意什么
clip-path 支持 CSS 过渡和动画，但只有 polygon() 和 inset() 是可插值的；circle()、ellipse()、path() 在部分浏览器中动画会跳变或卡顿。
- 想做平滑变形动画，所有关键帧的
polygon()点数必须一致（比如都是 10 个点），否则浏览器无法线性插值 - 响应式下用百分比坐标天然适配，但若用
vw/vh，需注意视口变化时坐标系重算延迟，可能闪动 - 移动端 Safari 对大量点数的
polygon()（>20 个）渲染性能较差，建议精简到 12 点以内
真正容易被忽略的是：裁剪后的区域仍占据原始空间，不影响文档流；如果要让周围内容“贴上去”，得额外用 transform 或负 margin 挤占，而不是指望裁剪本身改变布局。
