创建一个具有动态方向with SCSS的三角形

Question

请提供任何帮助，我想使用mixin与scss-im创建三角形的动态方向，但它对我不起作用

文件HTML

<div class="arrow-div">Arrow</div>

scss的文件

.arrow-div{
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
margin: 50px auto;
border:1px solid #ccc;
position: relative;
@include arrow(red,-40px,null,null,50%,top,translateX(-50%));
}
@mixin arrow($color,$top,$right,$bottom,$left,$dir,$translate){
position:absolute;
content:"";
border: 20px solid transparent;
position:$dir;
top:$top;
right:$right;
bottom:$bottom;
left:$left;
transform: $translate;
border-#{$dir}-color: $color;
}

下面是我的代码https://codepen.io/aminanba/pen/XWegBbx

Answer 1

最后我找到了用scs、mixin和if控制流创建箭头的动态方向的解决方案；

@mixin arrow($direction:up ,$color) {
content: "";
position: absolute;
border: 20px solid transparent;
@if $direction == "up" {
top: -40px;
left: 50%;
border-bottom-color: $color;
transform: translateX(-50%);
} @else if $direction == "right" {
right: -20px;
top: 50%;
border-left-color: $color;
transform: translateY(-50%);
} @else if $direction == "down" {
bottom: -40px;
left: 50%;
transform: translateX(-50%);
border-top-color: $color;
} @else if $direction == "left" {
left: -20px;
top: 50%;
transform: translateY(-50%);
border-right-color: $color;
}
}
/// test
.element {
position:relative;
&:before {
@include arrow("up", red);
}
}

<div class="element"></div>