使用 SCSS 创建具有动态方向的三角形

Question

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

文件 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

最后我找到了使用 scss、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>