1.css代码:(IE不是绕中心点旋转,图形会贴着上边和左边旋转)
.out2{
padding-top: 30px;
background: #883432;
height: 100px;
}
.prev{
margin-left:50px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
border-top:3px solid white;
border-left:3px solid white;
display: inline-block;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,SizingMethod='auto expand');
}
.next{
margin-left:50px;
width: 40px;
height: 40px;
transform: rotate(135deg);
-o-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
border-top:3px solid white;
border-left:3px solid white;
display: inline-block;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');
}
html:
<div class='out2'>
<div class='prev'></div>
<div class='next'></div>
</div>
模拟轮播的两个 向前、向后箭头
注:矩阵可参考:http://zywhunter.blog.163.com/blog/static/6465994120121164913173/