用css代码实现左右切换箭头 比图片、字体都方便好用

css代码

.lr-lists {
 display:block;
 width:40px;
 height:40px;
 z-index:88;
 position:relative
}
.lr-lists i {
 display:block;
 width:24px;
 height:24px;
 position:absolute;
 left:50%;
 top:50%;
 margin-top:-12px;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg)
}
.lr-lists.lr-lefts i {
 margin-left:-6px;
 border-left:3px solid #000;
 border-bottom:3px solid #000
}

.lr-lists.lr-rights i {
 margin-left:-18px;
 border-top:3px solid #000;
 border-right:3px solid #000
}
.lr-lists:hover i {
 border-color:#6cb63a
}

HTML代码：

<a href="javascript:;" class="lr-lists lr-lefts"><i></i></a>
<a href="javascript:;" class="lr-lists lr-rights"><i></i></a>

效果如图

主要技巧是用了 transform:rotate(45deg)，箭头的粗细和颜色直接改border的宽度和颜色即可实现。缺点是箭头角度只能是90度。

不过一般情况已经够用了。