第一步

.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. Android: Type Method 'NewStringUTF' could not be resolved

      编译一个最简单的Android NDK 例子(android-ndk-r8/samples/hello-jni)出现了错误信息:Type Method 'NewStringUTF' could n ...

  2. Source Insight使用小技巧小结

    Source Insight是一款强大的代码查看工具,本身支持扩展性很好.下面我们就介绍2个扩展用例. 1.快速打开当前文件所在的目录,这个功能类似于eclipse的easyshell插件,就是能快速 ...

  3. iOS 指南针的制作 附带源码

    iOS  指南针的制作  附带源码 代码下载地址: http://vdisk.weibo.com/s/HK4yE   http://pan.baidu.com/share/link?shareid=7 ...

  4. Address already in use: JVM_Bind(端口冲突)

    1.错误描述 2011-7-20 11:05:18 org.apache.catalina.core.StandardServer await严重: StandardServer.await: cre ...

  5. ORACLE查询语句

    --建表FAMILYINF CREATE  TABLE  FAMILYINFO(      FNO NUMBER CONSTRAINT FC001 PRIMARY KEY,--把字段fno约束为主键 ...

  6. 快速排序算法C#实现

    最近想把几大经典的排序算法系统的整理过一遍,写下笔记,算是复习吧!! 1.快速排序. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部 ...

  7. 自动布局autolayout和sizeclass的使用

    一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对 ...

  8. yarn计算一个节点容量及其配置项

    mapred-site.xml mapreduce.map.memory.mb 1536 每个Map Container的大小 mapreduce.reduce.memory.mb 2560 每个Re ...

  9. MATLAB ' : ' 官方解释

    1.冒号的作用 产生矢量,阵列标注以及for-loop迭代子 2.描述 冒号是MATLAB中最有用的操作符之一.它使用下述规则来创建有规则的空间矢量: j:k is the same as [j,j+ ...

  10. 问题记录1:The VMware Authorization Service is not running.

    问题 VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the pr ...