css里的下箭头,CSS箭头向下箭头

纯CSS

.arrow {

display: inline-block;

position: relative;

margin: 1em;

}

.arrow.thin.up {

border-top: 1px solid #fff;

border-left: 1px solid #fff;

height: 40px;

width: 40px;

transform: rotate(45deg);

}

.arrow.thin.left {

border-top: 1px solid #fff;

border-left: 1px solid #fff;

height: 40px;

width: 40px;

transform: rotate(135deg);

}

.arrow.thin.down {

border-top: 1px solid #fff;

border-left: 1px solid #fff;

height: 40px;

width: 40px;

transform: rotate(225deg);

}

.arrow.thin.right {

border-top: 1px solid #fff;

border-left: 1px solid #fff;

height: 40px;

width: 40px;

transform: rotate(315deg);

}

或作为SASS mixin

@mixin arrow($color, $direction: down, $size: 10px) {

border-top: 1px solid $color;

border-left: 1px solid $color;

height: $size;

width: $size;

@if $direction == 'up' {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";

} @else if $direction == 'left' {

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

transform: rotate(135deg);

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476)";

} @else if $direction == 'down' {

-webkit-transform: rotate(225deg);

-moz-transform: rotate(225deg);

transform: rotate(225deg);

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475)";

} @else if $direction == 'right' {

-webkit-transform: rotate(315deg);

-moz-transform: rotate(315deg);

transform: rotate(315deg);

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477)";

}

}

body {

background: #000;

text-align: center;

padding: 5em;

}

.arrow {

display: inline-block;

position: relative;

margin: 1em;

}

.arrow.thin.up {

@include arrow($direction: up, $color: #fff, $size: 40px);

}

.arrow.thin.left {

@include arrow($direction: left, $color: #fff, $size: 40px);

}

.arrow.thin.down {

@include arrow($direction: down, $color: #fff, $size: 40px);

}

.arrow.thin.right {

@include arrow($direction: right, $color: #fff, $size: 40px);

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值