clip-path裁剪三角形用polygon(0% 0%,100% 0%,50% 100%)可得正立等腰三角形，关键在理解百分比基于元素自身宽高；五角星必须用path()因polygon仅支持凸多边形；兼容性方面chrome 107+、safari 15.4+支持path()，但动画中使用易掉帧，建议静态使用或降级为svg clippath。
clip-path 裁剪三角形：用 polygon() 配合三个顶点坐标
直接写 clip-path: polygon(0% 0%, 100% 0%, 50% 100%) 就能裁出一个正立等腰三角形。关键不是记住坐标，而是理解百分比是相对于元素自身宽高的——左上角是 0% 0%，右上是 100% 0%，底边中点是 50% 100%。
常见错误是把单位写成 px 或漏掉百分号，比如 50 100 会被浏览器忽略整条声明；另外，如果父容器没设 width/height，三角形可能塌缩成一条线。
实操建议：
- 确保目标元素有明确的尺寸（哪怕只是
width: 200px; height: 200px;） - 用
background-color填充便于肉眼验证裁剪区域 - 想倒三角？把第三个点改成
50% 0%，前两点换成0% 100%和100% 100%
clip-path 绘制五角星：必须用 path()，polygon() 不够用
polygon() 只能画凸多边形，五角星是凹多边形，必须用 path()。它的语法接近 SVG 的 d 属性，比如：clip-path: path("M50,0 L61,35 L97,35 L68,57 L80,91 L50,70 L20,91 L32,57 L3,35 L39,35 Z")。
这个坐标是基于一个 100×100 的画布设计的，实际使用时建议包裹在 url(#star) 引用内联 SVG，否则每次修改都要重算所有点。直接写 path() 字符串的问题是：坐标难调、无缩放适应性、不支持 CSS 变量注入。
实操建议：
- 先在 SVG 编辑器（如 SVGOMG）里画好五角星，导出
<path d="..."></path>，再复制到path()中 - 给元素加
transform: scale(1.2)时，path()坐标不会自动缩放，得手动调整或改用 SVG<clippath></clippath> - Chrome 107+ 支持
path()，但 Safari 15.4+ 才开始稳定支持，旧版 Safari 会完全失效
兼容性与性能陷阱：别在动画里狂刷 clip-path
clip-path 在 Firefox 和 Safari 上仍依赖软件渲染，尤其 path() 形状越复杂，滚动或 hover 动画时掉帧越明显。CSS 动画里用 clip-path: polygon(...) 做过渡，Safari 会卡顿甚至闪退。
真正能放心用的场景只有静态裁剪或极简变化（比如两个三角形之间切换）。想做流畅动效？换 mask-image + PNG/SVG mask，或者干脆用 Canvas。
实操建议：
- 用
@supports (clip-path: polygon(0 0))做特性检测，降级为overflow: hidden+ 伪元素拼形状 - 避免在
:hover中同时触发clip-path和transform，这会让合成层频繁重建 - 移动端慎用——iOS Safari 对
path()的内存占用比桌面高 3 倍以上
Z）、不能自相交过度，否则某些浏览器会直接放弃渲染。最省事的做法，其实是用 inline SVG 的 <clippath></clippath>，虽然多几行 HTML，但可控性和兼容性高得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
