伪元素切角比clip-path更灵活，因伪元素是独立渲染层，只遮罩视觉区域而不裁剪内容、边框及子元素，可保留文字溢出和border样式；而clip-path直接裁剪整个元素盒。
伪元素切角为什么比直接 clip-path 更灵活
直接对目标元素用 clip-path 会把内容、边框、子元素全部裁掉，而伪元素（::before 或 ::after）是独立渲染层，只负责“遮罩视觉区域”，不干扰原内容布局和交互。比如你希望一个按钮有斜角边框但文字能自然溢出显示，或保留 border 样式——这时候必须用伪元素模拟“裁剪效果”，而非真裁剪。
用 ::before 实现斜角切口的最小可行代码
核心思路：伪元素铺满父容器，用 clip-path: polygon() 切出缺口形状，再设 background 遮盖原角；父元素保持完整，边框/文字照常渲染。
常见错误现象：clip-path 写错坐标顺序导致缺口反向、伪元素没设 content: "" 导致不渲染、没加 position: absolute 导致布局错位。
-
position: absolute必须加在伪元素上，且父容器需设position: relative - 斜角常用坐标如
polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%)—— 最后两点构成斜边 - 伪元素
z-index要低于主内容（如设-1），否则会盖住文字或点击区域 - 若需响应式，避免用固定像素值（如
20px），改用calc(5% + 10px)或视口单位
示例：
button {
position: relative;
padding: 12px 24px;
border: 2px solid #3498db;
}
button::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: white; /* 和父背景一致 */
clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
z-index: -1;
}
切单角 vs 切双角时的坐标陷阱
切左上角用 polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 20px, 20px 0) 是错的——它实际切的是右下区域。真正切左上，得让斜边从右上往左下走：polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%)。
切两个相邻角（如左上 + 左下）时，不能简单拼两个 polygon，因为伪元素只有一个 clip-path。得写成一个闭合多边形，例如：
clip-path: polygon( 0 20px, /* 左上缺口起点 */ 20px 0, /* 左上缺口终点 */ 100% 0, /* 右上角 */ 100% 100%, /* 右下角 */ 20px 100%, /* 左下缺口终点 */ 0 80% /* 左下缺口起点 */ );
关键点：clip-path 坐标系始终以伪元素自身盒模型为基准（0,0 是伪元素左上角），不是父元素；若伪元素尺寸没撑满（比如漏了 top/left/right/bottom），坐标会失效。
为什么 border 沿着斜角走不了？该用 mask 还是 clip-path
直接用 clip-path 伪元素只能盖住背景，无法让父元素的 border 自动贴合斜边——因为 border 是绘制在元素盒边缘的，不随伪元素变形。想实现“斜角边框”效果，有两个路子：
- 放弃原生
border，改用伪元素画边：给::before设细边框 + 同样clip-path，再叠一层::after做内边距留白 - 换用
mask：用radial-gradient或conic-gradient构造带透明通道的遮罩，比clip-path更适合控制“镂空边缘”的粗细和过渡 - 别硬扛：如果只是装饰性斜角，用 SVG
<clippath></clippath>引用更稳，尤其要动画时clip-path动画兼容性差，mask更可靠
最容易被忽略的一点：所有基于伪元素的切角方案，都依赖父容器有明确宽高或触发 BFC（比如 overflow: hidden），否则伪元素可能塌陷、坐标计算失准。移动端尤其要注意视口缩放导致的像素四舍五入，小尺寸下斜边容易锯齿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
