scss CSS-треугольники

Posted 2021-05-17

@mixin triangle($width, $direction, $color){ 
  width: 0; 
  height: 0; 
  
  @if $direction == up { 
    border-left: $width solid transparent; 
    border-right: $width solid transparent; 
    border-bottom: $width solid $color; 
  } 

  @if $direction == down { 
    border-left: $width solid transparent; 
    border-right: $width solid transparent; 
    border-top: $width solid $color; 
  } 
  
  @if $direction == left {
    border-top: $width solid transparent; 
    border-bottom: $width solid transparent; 
    border-right: $width solid $color; 
  } 
  
  @if $direction == right { 
    border-top: $width solid transparent; 
    border-bottom: $width solid transparent; 
    border-left: $width solid $color; 
  } 
}