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/