我将尽力解释这一点:
为此,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中是否有办法做到这一点,所以我不必担心每次框背景颜色更改时都更改箭头颜色?
谢谢。
答案 0 :(得分:1)
由于您的元素将具有纯色,因此可以在要旋转的位置上创建带有矩形的箭头以实现布局,然后可以使用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>
答案 1 :(得分:1)
这可以使用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
中的每种颜色添加了一个新类,并为背景和伪元素填充了适当的颜色。
mixin只需包含在.box
类中:
.box {
@include box-color();
position: relative;
width: 100px;
height: 100px;
margin-bottom: 40px;
}