如何使用 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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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%);
      }
    }
  }
}

您还可以动态添加类来指定要削减哪个角落。但请注意，切掉元素的顶部并不能按预期工作。您应该只使用它来剪切第一个元素的顶部。

:root {
  --offset: 1.5em;
}

.diagonal-grid > .cut-top-left {
  clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
}

.diagonal-grid > .cut-top-right {
  clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
}

.diagonal-grid > .cut-bottom-left {
  margin-bottom: calc(var(--offset) * -1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--offset)));
}

.diagonal-grid > .cut-bottom-right {
  margin-bottom: calc(var(--offset) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--offset)), 0 100%);
}

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


<!-- Body -->
<section style="height:5vh; background-color: gray;"><section>
<section class="diagonal-grid">
  <div class="bg-primary-subtle text-emphasis-primary p-5 cut-top-left">
    Lorem ipsum.
  </div>
  <div class="bg-danger-subtle text-emphasis-primary p-5 cut-bottom-left">
    Lorem ipsum.
  </div>
  <div class="bg-info text-emphasis-primary p-5 cut-bottom-right">
    Lorem ipsum.
  </div>
  <div class="bg-body-tertiary text-emphasis-primary p-5">
    Lorem ipsum.
  </div>
</section>

.diagonal-grid {
  $offset: 1.5em;

  > .cut-
    &top- {
      &left {
        clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);
      }
      &right {
        clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);
      }
    
    &bottom- {
      margin-bottom: calc(var(--offset) * -1);
      &left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--offset)));
      }
      &right {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--offset)), 0 100%);
      }
    }
}