clip-path polygon()是最直接的斜切方案，通过定义顺时针或逆时针闭合的四边形裁剪区域，同步裁剪背景、文字与阴影，避免transform skew导致的文字变形和点击区域错位，但需配合position: relative或overflow: hidden生效，且safari等浏览器要求严格闭合顺序与单位统一。
clip-path polygon() 是最直接的斜切方案
用 clip-path: polygon() 裁剪按钮，比 transform: skew() 更干净——它真正“切掉”了不可见区域，背景、文字、阴影都同步裁剪，不会出现文字扭曲或点击区域错位。但必须注意：顶点顺序要顺时针或逆时针闭合，否则 Safari 或旧版 Chrome 可能完全不渲染。
常见写法示例（左上角斜切）：
button {
clip-path: polygon(
20% 0%, /* 左上起点，向右偏移 */
100% 0%, /* 右上 */
100% 100%,/* 右下 */
0% 100%, /* 左下 */
0% 20% /* 回到斜边终点，闭合 */
);
}
- 百分比值（如
20%）控制斜边长度，调大则斜切更深 - 元素需有
position: relative或父容器设overflow: hidden，否则裁剪可能失效 - Firefox / Chrome / Safari 15.4+ 支持良好；IE 完全不支持，且无 CSS 级 fallback
skew() 模拟斜切时文字会变形
用 transform: skewX(-15deg) 看似简单，但实际会让按钮内文字也倾斜，破坏可读性。必须额外给子元素（比如 <span></span>）加反向 skewX(15deg) 补偿，结构变复杂，且在高缩放或 Retina 屏下易出现像素模糊。
- 仅适用于纯色背景、无阴影、无渐变的简单场景
-
skewY()常被误用于“竖向斜切”，但实际是沿水平轴挤压，视觉效果与预期不符 - 移动端 touch 区域仍按原始矩形计算，容易点空——尤其当斜切角度 >10° 时
background 渐变也能做单侧斜切角
如果只要右下角或左下角一个 45° 斜切，linear-gradient 是兼容性更好的选择，IE10+ 都支持，且不影响事件区域。
例如右下角切 15px：
button {
background: linear-gradient(-45deg, transparent 15px, #3498db 0);
background-size: 100% 100%;
}
- 多个角需叠加渐变时，必须配
background-size控制每个渐变覆盖范围，否则会互相遮盖 - 渐变方向（如
-45deg）必须和目标斜边走向一致，否则切口方向反了 - 无法实现非 45° 角度或非直角斜切；也不支持阴影跟随裁剪
移动端点击失灵和文字被裁是高频坑
这两个问题几乎总是一起出现：不是样式写错了，而是忽略了 clip-path 的行为边界。
-
clip-path不改变布局盒尺寸，但会裁剪pointer-events区域——iOS Safari 默认对裁剪后区域处理更严格，务必加pointer-events: auto - 文字紧贴斜边会被截断，不是字体问题，而是裁剪路径没留余量；加
padding或用transform: translateX(2px)微调位置更稳妥 - 若按钮含图标（如 Font Awesome），图标 SVG 也会被裁，需确认其
viewBox和裁剪坐标匹配，否则边缘锯齿明显
真正麻烦的从来不是怎么画出斜边，而是让斜边在各种缩放、DPR、触摸交互下都保持精确——这需要把 clip-path 坐标换成视口单位（vw）或配合 JS 动态重算，而不是只靠百分比硬写死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
