sass之triangle

最新推荐文章于 2025-06-24 14:24:29 发布

原创最新推荐文章于 2025-06-24 14:24:29 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass #mixin #triangle

sass 专栏收录该内容

11 篇文章

订阅专栏

@mixin triangle($direction,$size,$borderColor) {
     content:  "";
     height: 0;
     width: 0;

     @if $direction == left {
            border-right: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == right {
            border-left: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == top {
            border-bottom: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }

     @else if $direction == bottom {
            border-top: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }
}