polygon()可裁三角形但需三点且顺序正确，坐标须带单位，元素需有宽高，凹多边形如五角星须用path()或SVG clipPath，裁剪不改变布局与事件区域。
直接用 polygon() 就能裁出三角形，但坐标写错、单位漏掉或父容器没尺寸，都会让效果消失——不是代码无效，是裁剪区域塌了。
三角形必须用三个点，且顺序不能乱
polygon() 的每个点按顺时针或逆时针连成闭合路径，浏览器据此判断“内部”区域。如果点顺序交叉（比如 0% 0%, 100% 100%, 0% 100%），部分浏览器会直接忽略整条 clip-path 声明。
- 正立等腰三角形：用
polygon(0% 0%, 100% 0%, 50% 100%) - 倒三角：改成
polygon(0% 100%, 100% 100%, 50% 0%) - 左直角三角形：用
polygon(0% 0%, 0% 100%, 100% 100%) - 所有坐标必须带单位（
%或px），50 100是非法值，会被跳过
多边形裁剪要确保元素有明确宽高
百分比坐标基于元素自身宽高计算，如果目标元素没设 width/height（比如纯文字块或 display: inline 元素），50% 就可能解析为 0px，导致裁剪区域退化成点或线。
- 给元素加
width和height（哪怕只是200px） - 或用
aspect-ratio+width: 100%保比例 - 用
background-color填充元素，肉眼验证是否真被裁出形状 - 避免对
img直接裁剪却不设height，尤其在 Flex/Grid 容器中容易塌缩
五角星这类凹多边形不能用 polygon()
polygon() 只支持凸多边形，五角星有内凹角，强行用它定义会导致浏览器渲染异常或完全不生效。必须换 path()，但它的坐标是绝对数值，不自动响应式。
- 推荐方案：用内联 SVG 的
clip-path: url(#star)引用 - 若坚持用
path()，需包裹在url()里，例如clip-path: path("M50,0 L61,35 ... Z") - 注意 Safari 需加
-webkit-clip-path前缀，且 Chrome 107+、Safari 15.4+ 才支持path() -
path()在transition或@keyframes中易掉帧，静态展示更稳妥
真正难的不是写出坐标，而是理解裁剪发生在元素盒模型内部——它不改变布局流，也不影响事件区域。一个被 polygon() 裁成三角形的按钮，点击空白处依然会触发，因为点击检测仍按原始矩形进行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
