框箭头采用相应框的背景颜色

Question

我会尽可能简单地解释一下：

为此example我希望每个框的箭头自动采用其各自框的背景颜色，只需向框添加红色、黑色、灰色类。我可以轻松做到：

    .box.red {
      &:before {
        ...
        border-bottom: 1px solid $red;

      }
    }
   .box.black {
      &:before {
        ...
        border-bottom: 1px solid $black;

      }
    }
   .box.grey {
      &:before {
        ...
        border-bottom: 1px solid $grey;

      }
    }

但这意味着对于我创建的每种不同颜色，我都必须手动更改箭头颜色。例如，如果将来我想添加一个绿色框，我必须在 CSS 中将其箭头颜色更改为绿色。 Sass 中有没有办法做到这一点，这样我就不必担心每次框背景颜色发生变化时都会更改箭头颜色？

谢谢。

See DEMO

Answer 1

要获得这种效果，最好的方法是使用 css 继承。由于父框设置了背景，那么我们也只能继承:after伪元素background属性上的值——我们不能在边框颜色上使用它。幸运的是，我们可以在不使用边框的情况下获得 "triangular arrow" 效果，而是使用常规背景和 clip-path 规则代替。完整示例显示在下面的代码片段中：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
}
.box:before {
  content: '';
  position: absolute;
  background: inherit;
  clip-path: polygon(0 0, 30px 0, 15px 15px);
  width: 30px;
  height: 15px;
  bottom: -16px;
  left: 20px;
}

.red {
  background: #f00;
}

.black {
  background: #000;
}

.grey {
  background: #aaa;
}

<div class="box red"></div>
<div class="box black"></div>
<div class="box grey"></div>

IE 和 Edge 更新

如果所有这些都是真的：

与 IE 和 Edge 的兼容性是您关心的问题
您可以在 css 规则中处理一些微重复
您不打算在 .box 元素上设置边框

那么你可以将border-bottom-color应用到.box class并在:after伪元素定义中继承它如下：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
}
.box:before {
  content: ' ';
  border-bottom: 1px solid;
  border-bottom-color: inherit;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  border-width: 15px;
  height: 0;
  position: absolute;
  transform: rotate(180deg);
  width: 0;
  bottom: -30px;
  left: 20px;
}

.red {
  background: #f00;
  border-bottom-color: #f00;
}

.black {
  background: #000;
  border-bottom-color: #000;
}

.grey {
  background: #aaa;
  border-bottom-color: #aaa;
}

<div class="box red"></div>
<div class="box black"></div>
<div class="box grey"></div>

Answer 2

由于您的元素将具有纯色，因此您可以在应用旋转的位置创建带有矩形的箭头以实现布局，然后您可以使用 inherit 作为背景

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
  background:red;
}
.box::before {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  top:100%;
  left:20px;
  transform:translateY(-50%) rotateX(40deg) rotate(45deg);
  background:inherit;
}

.blue {
  background:blue;
}
.green {
  background:green;
}

<div class="box">

</div>

<div class="box blue">

</div>
<div class="box green">

</div>

您也可以依靠 CSS 变量，即使在很多地方使用它，您也只能更改一次颜色。

这是另一种创建形状的方法，您可以轻松控制箭头的颜色、大小和位置：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  padding-bottom: var(--s,20px);
  margin-bottom:10px;
  background:
    linear-gradient(to top right,transparent 49.8%,var(--c,red) 50%) var(--p,20px) 100%,
    linear-gradient(to top left, transparent 49.8%,var(--c,red) 50%) calc(var(--p,20px) + var(--s,20px)) 100%,
    var(--c,red) content-box;
  background-size:var(--s,20px) var(--s,20px);
  background-repeat:no-repeat;
}

.blue {
  --c:blue;
  --s:15px;
  --p:40px;
}
.green {
  --c:green;
  --s:10px;
  --p:60px;
}

<div class="box"></div>

<div class="box blue"></div>

<div class="box green"></div>

您可以轻松实现与您的代码相同的逻辑：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
  background:var(--c,green);
}
.box:before {
  content: ' ';
  border: solid transparent;
  border-bottom: 1px solid var(--c,green);
  border-width: 15px;
  height: 0;
  position: absolute;
  transform: rotate(180deg);
  width: 0;
  bottom: -30px;
  left: 20px;
}

.red {
  --c: #f00;
}

.black {
  --c: #000;
}

.grey {
  --c: #aaa;
}

<div class="box red"></div>
<div class="box black"></div>
<div class="box grey"></div>
<div class="box "></div>

Answer 3

这可以使用 SCSS mixin 来实现。 See codepen here

在链接的代码笔中，有一个定义颜色的变量：

$color-list: (
  "red": #f00,
  "black": #000,
  "grey": #aaa,
);

这个变量是唯一一个需要定义颜色的地方。如果需要更多盒子，您可以轻松添加更多颜色。

然后有一个 @mixin 添加了 background-color 和彩色边框：

@mixin box-color() {
  @each $color in map-keys($color-list) {
    &.#{$color} {
      background: map-get($color-list, $color);
      &:before {
        content: ' ';
        border: solid transparent;
        border-bottom: 1px solid map-get($color-list, $color);
        border-width: 15px;
        height: 0;
        position: absolute;
        transform: rotate(180deg);
        width: 0;
        bottom: -30px;
        left: 20px;
      }
    }
  }
}

mixin 基本上为 $color-list 中的每种颜色添加一个新的 class，并使用适合背景和伪元素的颜色填充 class。

mixin 只需包含在 .box class:

.box {
  @include box-color();
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
}

框箭头采用相应框的背景颜色

Box arrow to take background colour of respective box

html

css

sass

mixins

IE 和 Edge 更新