用border做一个移动端常见的返回按钮
第一步
.hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid #fff; //关键 border-left: 2px solid #fff; //关键 color: #fff; }
<a href="javascript:;" class="hs1"></a>
效果如图
第二步:运用css3 tranform的rotateZ
.hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid #fff; border-left: 2px solid #fff; color: #fff; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); //上面均是兼容写法 transform: rotateZ(-45deg); }
效果如图: