如何使用CSS ::after伪元素创建带斜切效果的导航条？-css教程-PHP中文网

::after伪元素无法直接实现斜切效果，需配合transform: skewx()反向矫正文字或clip-path多边形裁剪；border拼角仅为锯齿状近似，不响应缩放与文字长度。

如何使用css ::after伪元素创建带斜切效果的导航条？

::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() 抵消。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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;
}