clip-path 不影响盒模型，因其作用于绘制阶段而非布局阶段，元素仍按原始尺寸参与文档流、计算边距和容器撑开。
直接写 clip-path 不会影响盒模型——它天生就不动布局，裁剪只是视觉层的事，元素仍按原始宽高参与文档流、影响 margin collapse、撑开父容器。
clip-path 为什么不会改变盒模型尺寸？
因为 clip-path 作用于「绘制阶段」，不是「布局阶段」。浏览器先完成 layout（计算 width/height、位置、边距），再在 paint 阶段把超出路径的部分“擦掉”。所以：
- 被裁掉的区域依然占位：子元素
position: absolute的top: 0; left: 0仍锚定在原始左上角，不是裁剪后可见区域的顶点 -
getBoundingClientRect()返回的是原始矩形，不是 polygon 形状的包围盒 - flex 或 grid 容器中，该元素的
flex-basis或grid-area仍按未裁剪尺寸计算 - 用
overflow: hidden裁矩形时，它会截断子元素溢出内容；而clip-path即使裁成三角形，子元素若position: absolute且坐标超限，仍可能显示在裁剪区外（除非父级也加overflow: hidden）
哪些操作会意外干扰盒模型表现？
你没改盒模型，但别人（或你自己）可能无意中动了它：
- 给元素加
transform（哪怕只是translateZ(0)）会触发新层叠上下文，也可能隐式改变其 containing block，间接影响absolute子元素定位基准 - 父容器设了
overflow: hidden，看起来像“配合 clip-path”，实则多了一层裁剪逻辑——它裁的是渲染输出，不依赖clip-path，但会把 transform 后溢出的内容真·切掉 - 对
同时用
object-fit: cover和clip-path: polygon()：前者先拉伸图像并截断，后者再在已变形的图像上裁，坐标系错乱，结果不可控 - 元素是
display: inline（如默认<img>），又没设宽高 →polygon(50% 0, ...)的百分比无参照，计算为 0，裁剪失效，此时你以为“没裁”，其实是盒模型太小导致路径塌缩
想让视觉裁剪和交互热区一致，不能只靠 clip-path
clip-path 纯视觉，事件热区永远是原始矩形。要让点击只响应可见部分，必须额外处理：
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案：用
pointer-events: none关闭原元素，再叠一层同路径的<svg><path>，设fill="transparent" pointer-events="auto"—— SVG 的 hit-testing 按真实路径走 - JS 方案：监听
click，用element.getBoundingClientRect()换算事件坐标，再用射线法判断是否在polygon()顶点围成的区域内 - 别试
pointer-events: polygon()：这是废弃草案，所有浏览器都不支持 - 移动端真机必测：iOS Safari 对靠近裁剪边界的点击判定偏宽松，Chrome for Android 更严格，仅靠 desktop DevTools 的可视化小图标会误判
最常被忽略的一点：clip-path 的路径顺序错了，不是“没效果”，而是“裁反了”——本该保留的区域被干掉，本该隐藏的反而露出来。顺时针写满四点再删一个重补，是最快暴露方向问题的办法。
