第一步

.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. TFTP:简单文本传输协议,BOOTP:引导程序协议

    TFTP:简单文本传输协议,BOOTP:引导程序协议 1.TFTP:      TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用 ...

  2. ACM 位运算

    的幂 boolean power2(int x) { return((x&(x-1))==0)&&(x!=0): } For example: #include<stdi ...

  3. Java中System.getProperty()的参数

    Java中System.getProperty的使用方法: 1,System.getProperty返回的数值,比如java.version,java.home,os.name,user.home以及 ...

  4. 开始使用THREE.JS

    开始使用THREE.JS 译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏, ...

  5. 自己动手用maven构建基于SSI的java EE应用

    上篇跟大家聊了聊maven的简单使用,之前也写了一篇搭建基于SSI(struts2,spring,ibatis)的javaEE开发环境的文章,但是那篇只是给初学者搭建一个简单的SSI应用的框架,其实我 ...

  6. linux nVidia driver 304 319 . installation by hand

    It's so painful to install nVidia driver by hand on linux. If you remove it or you want to upgrade b ...

  7. cin 和scanf,scanf比cin快很多

    //#include <iostream> #include <stdio.h> //#include <fstream> //using namespace st ...

  8. 在Node.js中使用RabbitMQ系列一 Hello world

    在前一篇文章中可伸缩架构简短系列中提到过关于异步的问题.当时推荐使用RabbitMQ来做任务队列的实现方案.本篇文章以Node.js为例子,来实际操作如何和RabbitMQ进行交互. 介绍 Rabbi ...

  9. Linux install sogou input method

    # Copyright (c) 2016, 付刘伟 (Liuwei Fu)# All rights reserved.# 转载请注明出处 Linux下安装搜狗输入法需要安装以下插件,当以下所有插件安装 ...

  10. java初学者

    决心开始从头学习java,并且每天记录自己的学习进度与学习成果,用于分享和促进. 鉴于是新手,并且之前也没有任何发文的经历,可能更多的是根据自己已有的知识容量基础之上进行的深化,太基础的看一遍就能会的 ...