方框箭头代表相应方框的背景色 [英] Box arrow to take background colour of respective box

问题描述

我将尽力解释这一点:

对于此 示例 ，我想要每个框的箭头通过仅向框添加红色，黑色，灰色类别来自动获取其相应框的背景色. 我可以轻松做到:

For this example I want the arrow of each box to take the background colour of its respective box automatically by only adding red, black, grey classes to the box. I could easily do:

    .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中是否有办法做到这一点，所以我不需要担心每次框背景颜色更改时都更改箭头颜色吗?

But this implies that for every different colour I create I'll have to change the arrow colour manually. If in the future I want to add a green box for example I'll have to change its arrow colour to green in the CSS. Is there a way in Sass to make it so I don't need to worry with changing the arrow colour every time the box background colour changes?

谢谢.

请参见演示

See DEMO

推荐答案

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

Since your element will have solid color you can create the arrow with a rectangle on where you apply rotation in order to achieve the layout then you can use inherit for background

.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变量，即使在很多地方都使用过该颜色，也只能更改一次.

You can also rely on CSS variable and you will be able to change the color only once even if it's used in many places.

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

Here is another way to create the shape where you can easily control the color, size and position of the arrow:

.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>

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

You can easily achieve the same logic to your code:

.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>

这篇关于方框箭头代表相应方框的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！