作者:帅哥刘常胜 | 来源:互联网 | 2023-10-15 12:56
第一步
.hs1{
float: left;
.mt(.25rem);
.ml(.12rem);
width: .3rem;
height: .3rem;
border-top: 2px solid #fff; //关键
border-left: 2px solid #fff; //关键
color: #fff;
}
效果如图
第二步:运用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);
}
效果如图: