//定义一个三角的函数 实现不同方向的三角加兼容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);}
时间: 2024-11-05 18:49:58