用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>
效果如图
第二步:运用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做一个移动端常见的返回按钮的更多相关文章
- uwp - 做一个相对炫酷的动画按钮/按钮动画
原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...
- 【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...
- vue实现一个移动端屏蔽滑动的遮罩层
在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- 做一个懒COCOS2D-X程序猿(一)停止手打所有cpp文件到android.mk
前言:”懒”在这里当然不是贬义词,而是追求高效,拒绝重复劳动的代名词!做一个懒COCOS2D-X程序猿的系列文章将教会大家在工作中如何偷懒,文章篇幅大多较短,有的甚至只是几行代码,争取把懒发挥到极致! ...
- [转]jsPlumb插件做一个模仿viso的可拖拉流程图
原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...
- 【权限维持】window服务端常见后门技术
0x00 前言 未知攻焉知防,攻击者在获取服务器权限后,通常会用一些后门技术来维持服务器权限,服务器一旦被植入后门,攻击者如入无人之境.这里整理一些window服务端常见的后门技术,了解攻击者的常见后 ...
- 强哥的分享--如何使用Spring Boot做一个邮件系统
http://springboot.fun/ actuator是单机.集群环境下要使用Spring Boot Admin将各个单机的actuator集成越来 mvn clean package -Dm ...
- 使用Vue+Django+Ant Design做一个留言评论模块
使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...
随机推荐
- Arduino 串口篇 Arduino发送二进制 send binary via RS232-to-USB to PC
有用的链接在这里:http://hi.baidu.com/mizuda/item/06b7fdc1d0e45a0ec710b2dd 更加详细的内容请查阅Arduino官方:http://arduino ...
- Nginx之旅系列 - Nginx的configuration
题记:Nginx之旅系列是用来记录Nginx从使用到源码学习的点点滴滴,分享学习Nginx的快乐 Nginx 首页: http://nginx.org/ Nginx的configuration 今天对 ...
- Unable to start T-SQL Debugging. Could not connect to the computer ‘.’
Unable to start T-SQL Debugging. Could not connect to the computer ‘.’ 在Win7上面使用SSMS连接到SQL Server使用D ...
- Hamilton
import java.util.Vector; class Hamilton { int start; int a[][]; int len; int x[]; // 记录回路 boolean fl ...
- easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大 >>>>>>>>>>> ...
- Hexo+NextT基本设置【3】
该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 或许在你看到我这篇我文章之前,你已经成功的通过Git ...
- for循环和while循环
for循环和while循环 --道心 for循环 name1_list=['daoxin','wuxin','zhixin']for ele in name1_list: #找到"wuxin ...
- 关于CachedRowSetImpl类
全称: com.sun.rowset.CachedRowSetImpl 父类: javax.sql.rowset.BaseRowSet 实现的接口: javax.sql.RowSet javax.sq ...
- C++中的结构体vector排序
在包含了头文件#include <algorithm>之后,就可以直接利用sort函数对一个vector进行排序了: // sort algorithm example #include ...
- 有关linux标准输出、标准输入、标准错误的重定向问题
1.简单的命令行重定向问题. 例:ls -al test test1 test2 1>out.txt 2>err.tx 这里ls这句命令行命令之后将标准输入重定向到out ...