使用sass绘制三角形
使用sass绘制三角形
楠木楠 发表于11个月前
使用sass绘制三角形
  • 发表于 11个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

用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代码:

<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>

效果:

标签: css Sass
共有 人打赏支持
粉丝 98
博文 472
码字总数 534361
×
楠木楠
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: