如何使框内的内容保持在网格内，同时将框打破网格

Question

对于标题屠宰感到抱歉，但我必须承认，如果有更好的术语来描述我想要实现的目标，我不知道。相反，我已经包含了一个图像（他们倾向于说千言万语）

我想要创建的是青色盒子。我希望这种形象可以解释这个想法。

解决

Per Kees van Lierop回答我最终做了以下事情：

&__label {
  @include span-columns(6);
  margin-top: 4rem;
  background-color: rgba($color-secondary, 0.5);
  color: white;
  padding: $base-padding;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 9999px;
    height: 100%;
    background-color: inherit;
  }
}

给我一​​个不错的结果：

Answer 1

您可以添加：在位于框左侧的伪元素之前，以及青色背景：

.cyan-box {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 10000000px; // a large amount, long enough to reach the edge
        height: 100%;
        content: '';
        display: block;
        background: cyan;
    }
}