如何使用 Bootstrap 5 设置对角线背景样式？

Question

使用 Bootstrap 5 和 (s)css 时如何创建对角线风格的背景（如下面的屏幕截图所示）？

理想情况下，可以与此处记录的其他 Bootstrap 后台实用程序很好地配合使用： https://getbootstrap.com/docs/5.3/utilities/background/

所以例如当有：

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

或其他颜色、渐变和不透明度：

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

能够轻松添加对角线效果（向上/向下任一方向）？

Answer 1

您可以使用

clip-path

切割顶部：

:root {
  --offset: 1.5em;
}

.diagonal-grid > div:not(:first-child) {
  margin-top: calc(var(--offset) * -1); 
}

.diagonal-grid > div:nth-child(even) {
  clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
}

.diagonal-grid > div:not(:first-child):nth-child(odd) {
  clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>


<!-- Body -->
<section class="diagonal-grid">
  <div class="bg-primary-subtle text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-danger-subtle text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-info text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-body-tertiary text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
  <div class="bg-success text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
</section>

如果你想用 SCSS 编写，你可以使用这样的东西：

.diagonal-grid {
  $offset: 1.5em;
  
  > div {
    &:nth-child(even) {
      clip-path: polygon(0 $offset, 100% 0, 100% 100%, 0 100%);
    }
    &:not(:first-child) {
      margin-top: calc(#{$offset} * -1);
      &:nth-chil(odd) {
        clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
      }
    }
  }
}