使用sass绘制三角形

水深无声 2022-01-13 08:09 262阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

用border生成三角形的@mixin：

// triangle
    @mixin triangle($direction, $size, $borderColor ) {
      content:"";
      height: 0;
      width: 0;
    
      @if $direction == top {
        border-bottom:$size solid $borderColor;
        border-left:$size dashed transparent;
        border-right:$size dashed transparent;
      } 
      @else if $direction == right {
        border-left:$size solid $borderColor;
        border-top:$size dashed transparent;
        border-bottom:$size dashed transparent;
      } 
      @else if $direction == bottom {
        border-top:$size solid $borderColor;
        border-left:$size dashed transparent;
        border-right:$size dashed transparent;
      } 
      @else if $direction == left {
        border-right:$size solid $borderColor;
        border-top:$size dashed transparent;
        border-bottom:$size dashed transparent;
      }
    }

这个@mixin主要有三个变量：第一个是方向的，因为三角形根据箭头朝向有四种方向，我们对应常用的css属性top,right,bottom,left；第二个表示三角形的大小；第三个表示颜色。当然你可以挑你常用的那个设置为变量的默认值，那样调用常用的那个就比较简单了，直接`@include triangle;`就ok了。

编译之后的css代码：

/* line 192, ../sass/test1.scss */
    .top {
      content: "";
      height: 0;
      width: 0;
      border-bottom: 20px solid #322222;
      border-left: 20px dashed transparent;
      border-right: 20px dashed transparent;
    }
    
    /* line 195, ../sass/test1.scss */
    .bottom {
      content: "";
      height: 0;
      width: 0;
      border-top: 20px solid #322222;
      border-left: 20px dashed transparent;
      border-right: 20px dashed transparent;
    }
    
    /* line 198, ../sass/test1.scss */
    .left {
      content: "";
      height: 0;
      width: 0;
      border-right: 20px solid #322222;
      border-top: 20px dashed transparent;
      border-bottom: 20px dashed transparent;
    }
    
    /* line 201, ../sass/test1.scss */
    .right {
      content: "";
      height: 0;
      width: 0;
      border-left: 20px solid #322222;
      border-top: 20px dashed transparent;
      border-bottom: 20px dashed transparent;
    }

页面html代码：

效果：

![214442_S7bz_2772739.png][]

转载于:https://my.oschina.net/liuyuantao/blog/801756

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/fc17971626604098a9ae8d3230bd5123.png
[214442_S7bz_2772739.png]: https://static.oschina.net/uploads/space/2016/1207/214442_S7bz_2772739.png