框箭头以获取各自框的背景颜色。
我将尽量简单地解释这一点：
对于此示例，我希望每个框的箭头只添加红色、黑色、灰色类，从而自动获取其各自框的背景颜色。我可以很容易地做到：
.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有一个方法来做它，所以我不需要担心改变箭头颜色时，每次方框背景颜色变化？
谢谢。
回答 3
Stack Overflow用户
发布于 2019-03-10 19:55:28
由于您的元素将具有纯色，您可以在应用旋转的位置创建带有矩形的箭头，以实现布局，然后可以使用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>
Stack Overflow用户
发布于 2019-03-10 18:13:08
要获得这种效果，最好的方法是使用css继承。由于父框具有背景集，所以我们只能继承:after伪元素background属性上的值--我们不能在边框颜色上使用它。幸运的是，我们可以获得“三角形箭头”的效果，而不是使用边框，而是有规则的背景和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类，并在: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>
Stack Overflow用户
发布于 2019-03-11 13:49:15
这可以使用SCSS混合器来实现。请看这里的代码
在链接代码中，有一个变量定义了您的颜色：
$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中的每种颜色添加了一个新的类，并为背景和伪元素填充了适当的颜色。
只需在.box类中包含mixin：
.box {
@include box-color();
position: relative;
width: 100px;
height: 100px;
margin-bottom: 40px;
}https://stackoverflow.com/questions/55090673
复制相似问题
腾讯云开发者
