scss实现不同方向的三角

要在 SCSS 中实现不同方向的三角，你可以使用一个 mixin，然后传递方向参数来生成你想要的三角形。以下是一个简单的示例：

@mixin triangle($size, $direction, $color) {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 $size $size $size;
  border-color: transparent transparent $color transparent;

  @if $direction == "up" {
    border-width: $size $size 0 $size;
    border-color: $color transparent transparent transparent;
  }
  @else if $direction == "right" {
    transform: rotate(90deg);
  }
  @else if $direction == "down" {
    transform: rotate(180deg);
  }
  @else if $direction == "left" {
    transform: rotate(270deg);
  }
}

// 生成向上的红色三角形
.triangle-up {
  @include triangle(10px, "up", red);
}

// 生成向右的蓝色三角形
.triangle-right {
  @include triangle(20px, "right", blue);
}

// 生成向下的绿色三角形
.triangle-down {
  @include triangle(30px, "down", green);
}

// 生成向左的黄色三角形
.triangle-left {
  @include triangle(40px, "left", yellow);
}

在上面的示例中，我们创建了一个 mixin `triangle`，它接受三个参数：大小、方向和颜色。我们使用 `border-width` 和 `border-color` 属性来创建一个向上的三角形，然后使用 `@if`、`@else if` 和 `transform` 来处理其他方向的三角形。最后，我们使用 `@include` 在我们的 CSS 类中调用 mixin，然后传递我们想要的参数。