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

Posted 2023-03-06

【中文标题】使用 SCSS 创建具有动态方向的三角形

【英文标题】：Create a triangle with Dynamic direction WITH SCSS

【发布时间】：2022-01-21 20:46:33

【问题描述】：

请任何帮助我想用 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

【问题讨论】：

老实说，我只会使用 SVG 并根据方向旋转它。

【参考方案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>