::after伪元素无法直接实现斜切效果，需配合transform: skewX()反向矫正文字或clip-path多边形裁剪；border拼角仅为锯齿状近似，不响应缩放与文字长度。
::after 伪元素本身不能直接创建斜切（skew）效果，必须配合 transform: skewX() 或 clip-path 才能实现视觉上的“斜切导航条”。纯用 ::after 叠加内容或边框是常见误解。
为什么直接用 ::after + border 无法真正斜切
很多人尝试给 ::after 设置 border-top 和 border-right 拼出斜角，但这只是近似三角形，边缘是锯齿状、不随容器缩放、无法响应文字长度变化。真实斜切需要几何变形或裁剪。
- border 拼角本质是 CSS 边框渲染的副产品，不是可控形状
- skewX() 会连带内容一起倾斜，需用反向 skew 补偿文字
- clip-path 支持多边形，更精确，但 IE 完全不支持，Edge 17+ 才开始支持
推荐方案：transform: skewX() + 反向矫正文字
这是兼容性最好（Chrome 36+, Firefox 16+, Safari 9+）、性能可控的方式。核心思路是：用 ::after 覆盖整个导航项背景并倾斜，再对文字本身做反向 skewX() 抵消。
.nav-item {
position: relative;
padding: 12px 24px;
}
.nav-item::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: #4a6fa5;
transform: skewX(-15deg);
z-index: -1;
}
.nav-item span {
display: inline-block;
transform: skewX(15deg); /* 抵消父级倾斜 */
}- 务必设置
z-index: -1，否则::after会遮挡文字点击区域 - 倾斜角度建议控制在 -12deg ~ -20deg 之间，过大易导致文字渲染模糊
- 如果导航项有 hover 效果，
::after的 transform 需同步过渡，否则出现跳变
更现代方案：clip-path 配合 ::after 实现无失真斜切
当只需支持 Chrome 63+/Firefox 54+/Safari 15.4+ 时，clip-path: polygon() 更干净——它裁剪的是视觉区域，不影响布局流和文字渲染质量。
立即学习“前端免费学习笔记（深入）”；
.nav-item::after {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: #4a6fa5;
clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
z-index: -1;
}-
calc(100% - 24px)中的24px是右下角“斜切缺口”的水平偏移量，数值越大，斜切越明显 - 若需响应式，建议用
vmin或 JS 动态计算，因为clip-path不支持百分比以外的相对单位（如 em） - 注意 Safari 对
clip-path的polygon()支持较晚，iOS 15.4 是分水岭
斜切导航条真正的难点不在怎么画，而在于如何让斜角与相邻项无缝拼接、hover 时过渡自然、移动端点击区域不被裁剪。用 transform 方案要小心字体亚像素渲染，用 clip-path 则得盯住 Safari 版本兼容表——这些细节往往在开发后期才暴露。
