第一步

.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);
}

  效果如图:

用border做一个移动端常见的返回按钮的更多相关文章

  1. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

  2. 【移动端debug-6】如何做一个App里的web调试小工具

    原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...

  3. vue实现一个移动端屏蔽滑动的遮罩层

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...

  4. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

  5. 做一个懒COCOS2D-X程序猿(一)停止手打所有cpp文件到android.mk

    前言:”懒”在这里当然不是贬义词,而是追求高效,拒绝重复劳动的代名词!做一个懒COCOS2D-X程序猿的系列文章将教会大家在工作中如何偷懒,文章篇幅大多较短,有的甚至只是几行代码,争取把懒发挥到极致! ...

  6. [转]jsPlumb插件做一个模仿viso的可拖拉流程图

    原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...

  7. 【权限维持】window服务端常见后门技术

    0x00 前言 未知攻焉知防,攻击者在获取服务器权限后,通常会用一些后门技术来维持服务器权限,服务器一旦被植入后门,攻击者如入无人之境.这里整理一些window服务端常见的后门技术,了解攻击者的常见后 ...

  8. 强哥的分享--如何使用Spring Boot做一个邮件系统

    http://springboot.fun/ actuator是单机.集群环境下要使用Spring Boot Admin将各个单机的actuator集成越来 mvn clean package -Dm ...

  9. 使用Vue+Django+Ant Design做一个留言评论模块

    使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...

随机推荐

  1. Web缓存解决方案

    缓存是构建于HTTP统一接口之上的最有用功能之一.可以利用缓存减少终端用户感知到的延时,增加可靠性,减少带宽使用和成本,降低服务器负载.缓存无处不在,可以在服务器网络里,内容分发网络(Content ...

  2. python 调用 bash (python 调用linux命令)

    原文这里有显示地址:http://zhou123.blog.51cto.com/4355617/1312791 现在摘取一部分: 这里介绍一下python执行shell命令的四种方法: 1.os模块中 ...

  3. spring添加通知配置

    在项目里添加的spring配置文件 <bean id="beforeMethod" class="com.wxw.core.common.AdviceBefore& ...

  4. Linux下逻辑卷创建与管理

    用虚拟机加一块硬盘后,查看硬盘状况,使用fdisk-l命令: [root@jerrybj ~]# fdisk -l Disk /dev/sda: 21.4 GB, 21474836480 bytes ...

  5. 用ajax对数据进行查看人员信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. mybatis 入门进阶之 mapper

    由于上节 <mybatis 入门优化>中的dao实现类耦合了user.xml中的statment的id,例如:src.main.resource.userMapper.findUserBy ...

  7. Java垃圾回收机制的工作原理

    Java垃圾回收机制的工作原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 获取更多内容,请关注小编个人微信公众平台: 一.Java中引入垃圾回收机制的作用 ...

  8. php之简单的文件管理(基本功能)

    (1)先要想好要操作哪个文件? (2)确定文件的路径? (3)要有什么文件管理功能? 一.先做一下简单的查看文件功能,文件中的文件和文件夹都显示,但是双击文件夹可以显示下一级子目录,双击"返 ...

  9. mongo数据库时间存储的问题

    题记:项目中要加的内容,可以实现对设备的预定,被某个用户预定后的设备就不能再被其他用户所使用了,用户预定的时候就需要输入预定时间,web前端用到了boostrap的date的一个插件,非常好用,接下来 ...

  10. [UWP小白日记-9]页面跳转过度动画(二)

    又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...