triangle-mixin.scss 769 B

123456789101112131415161718192021222324
  1. @charset "utf-8";
  2. @mixin triangle($direction, $size, $borderColor) {
  3. content: '';
  4. height: 0;
  5. width: 0;
  6. @if $direction == top {
  7. border-bottom: $size solid $borderColor;
  8. border-left: $size dashed transparent;
  9. border-right: $size dashed transparent;
  10. } @else if $direction == right {
  11. border-left: $size solid $borderColor;
  12. border-top: $size dashed transparent;
  13. border-bottom: $size dashed transparent;
  14. } @else if $direction == bottom {
  15. border-top: $size solid $borderColor;
  16. border-left: $size dashed transparent;
  17. border-right: $size dashed transparent;
  18. } @else if $direction == left {
  19. border-right: $size solid $borderColor;
  20. border-top: $size dashed transparent;
  21. border-bottom: $size dashed transparent;
  22. }
  23. }