用border做一个移动端常见的返回按钮

时间:2023-03-09 16:57:10
用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>

  用border做一个移动端常见的返回按钮效果如图

第二步:运用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);
}

  效果如图:

用border做一个移动端常见的返回按钮