sass之triangle

最新推荐文章于 2025-12-17 10:51:44 发布

原创最新推荐文章于 2025-12-17 10:51:44 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass #mixin #triangle

sass 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个用于创建三角形边框的 CSS mixin 方法，包括如何使用 mixin 函数来快速生成不同方向的三角形边框效果。

@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;
     }
}