clip-path裁剪三角形的核心原理是用polygon()基于元素坐标系定义三点闭合路径，需顺时针或逆时针排列；常见等腰、直角、箭头三角形坐标组合固定；边缘锯齿源于浏览器抗锯齿策略，非clip-path缺陷；其本质是真裁剪，影响事件区域与可访问性，不同于border透明三角形的视觉欺骗。
clip-path 裁剪三角形的核心原理
三角形本质是三点构成的多边形，clip-path 的 polygon() 函数正好支持用坐标点定义任意闭合形状。关键不是“怎么画”，而是“坐标怎么算”——所有点必须基于元素自身的坐标系（左上角为 0 0，右下角为 100% 100%），且顺序必须顺时针或逆时针闭合，否则裁剪可能失效或反向。
常见三角形的 polygon() 坐标写法
不用记绝对数值，记住三个典型场景的相对坐标组合即可：
- 底边在下、顶点朝上的等腰三角形：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) - 直角在左上角的直角三角形：
clip-path: polygon(0 0, 100% 0, 0 100%) - 指向右侧的箭头形三角形（常用于提示框）：
clip-path: polygon(0 0, 100% 50%, 0 100%)
注意：% 和无单位数值（如 0）可混用，但推荐统一用 % 保证响应式行为；Chrome 和 Firefox 支持良好，Safari 15.4+ 才完整支持 polygon() 的百分比语法，旧版需换用像素值或降级方案。
为什么三角形边缘有时发虚或锯齿？
这不是 clip-path 本身的问题，而是浏览器对非轴对齐几何体的抗锯齿策略导致的。尤其当元素有缩放、transform 或高 DPI 屏幕下更明显：
- 避免对裁剪后的元素再加
transform: scale()，会放大锯齿 - 给元素显式设置
backface-visibility: hidden或will-change: transform可能触发更优渲染路径（效果因浏览器而异） - 若必须高清，考虑用 SVG
<clippath></clippath>替代，它对矢量边缘控制更稳定
clip-path 与 border-triangle 方案的本质区别
很多人用透明 border 技巧造三角形，但那是“视觉欺骗”，实际占位仍是矩形；clip-path 是真裁剪，影响事件区域、滚动边界和可访问性树：
- 被
clip-path切掉的部分不响应鼠标事件（pointer-events: none不需要额外加） - 若三角形需作为链接或按钮，确保焦点轮廓（
:focus-visible）也按裁剪后形状渲染（部分浏览器仍显示矩形轮廓） - 不能通过
border实现的镂空三角形（比如中间挖空）、或带圆角的三角形，只能靠polygon()配合clip-path的path()语法（需转义 SVG 路径，兼容性更低）
真正要用好 clip-path 画三角形，得先接受它是个“裁剪蒙版”而非“绘图工具”——它的职责是藏，不是画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
