如何使用Bootstrap 5及SCSS实现兼容原生工具的斜向背景？

核心思路 #

斜向背景效果通过伪元素+CSS变换/裁剪实现，确保和Bootstrap原生背景工具类完全兼容：

1. 给目标元素添加相对定位，用伪元素生成覆盖整个元素的背景层
2. 伪元素通过background: inherit继承父元素的所有背景属性（颜色、渐变、透明度等）
3. 用skewY()实现倾斜角度，clip-path裁剪出斜切形状，保留需要的斜向区域
4. 通过SCSS生成可复用的工具类，直接和bg-*系列类搭配使用

SCSS实现代码 #

在你的项目SCSS文件中添加以下代码，可根据需求调整变量参数：

// 斜向背景的基础配置变量
$slant-default-height: 2rem; // 斜切区域的高度
$slant-default-angle: -5deg; // 默认倾斜角度：负数向左下斜，正数向右下斜

// 生成斜向背景的复用mixin
@mixin bg-slant($position: top, $angle: $slant-default-angle, $height: $slant-default-height) {
  position: relative;
  z-index: 1;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: inherit; // 完全继承父元素的背景样式
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% #{$position == 'top' ? '-' : '+'} #{$height}),
      0 calc(#{$position == 'top' ? $height : '100%'})
    );
    transform: skewY($angle);
    // 针对不同方向调整变换原点，确保倾斜方向正确
    @if $position == 'top' {
      transform-origin: top left;
    } @else {
      transform-origin: bottom left;
    }
  }
}

// 生成基础斜切工具类
.bg-slant-top {
  @include bg-slant('top');
}

.bg-slant-bottom {
  @include bg-slant('bottom');
}

// 可选：生成自定义角度的工具类（比如.bg-slant-top-10deg）
@for $i from 1 through 15 {
  .bg-slant-top-#{$i}deg {
    @include bg-slant('top', -#{$i}deg);
  }
  .bg-slant-bottom-#{$i}deg {
    @include bg-slant('bottom', #{$i}deg);
  }
}

使用示例 #

基础背景+斜切效果 #

直接给已有背景类的元素添加斜切工具类：

<div class="bg-primary-subtle text-emphasis-primary bg-slant-top p-5">
  Lorem ipsum.
</div>

渐变+透明度+斜切效果 #

完美兼容Bootstrap的渐变、透明度工具类：

<div class="bg-success text-white bg-gradient bg-opacity-75 bg-slant-bottom p-5">
  Lorem ipsum.
</div>

自定义倾斜角度 #

使用循环生成的自定义角度类：

<div class="bg-info bg-gradient bg-slant-top-10deg p-5">
  顶部10度斜切效果
</div>

兼容性说明 #

• 依赖clip-path和transform: skewY，支持所有Bootstrap 5官方兼容的现代浏览器
• 伪元素完全继承父元素背景属性，无论纯色、渐变还是透明度配置都能适配

内容的提问来源于stack exchange，提问作者Marcel Overdijk