scss实现不同方向的三角

最新推荐文章于 2023-05-15 19:33:27 发布

weixin_34233679

最新推荐文章于 2023-05-15 19:33:27 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bgxiaoniu/p/6662412.html

本文介绍了一个使用Sass实现的三角形方向生成器，该生成器通过传入不同的参数来生成不同方向和大小的三角形样式。支持顶部、底部、左侧和右侧四个方向，并且可以指定三角形的大小和颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//定义一个三角的函数 实现不同方向的三角加兼容ie6
//第一个参数传入方向
//第二个参数传入大小
//第三个参数传入颜色
//注意:传入参数中间必须逗号分隔
@mixin triangle($x, $y:10px, $z:white ){
    @if $x == "top"{
        border-width: $y;
        border-color:transparent transparent $z transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if $x == "bottom"{
        border-width: $y;
        border-color: $z transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
    @else if $x == "left"{
        border-width: $y;
        border-color:transparent $z transparent transparent;
        border-style: dashed solid dashed dashed;
    }
    @else if $x == "right"{
        border-width: $y;
        border-color:transparent transparent transparent $z;
        border-style: dashed dashed dashed solid;
    }
    width: 0;
    height: 0;
    overflow: hidden;
}
.box{
    @include triangle(right, 200px, red);
}