用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.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...
随机推荐
- 详解android的号码匹配
什么是号码匹配,个人理解,即判断两组号码是否属于同一个号码.在实际使用过程中,接触到的号码会涉及到区号,国家编码以及IP号码等,这个时候就用到了号码匹配.两个内容不一样的号码,如+86***和1795 ...
- UVA 216 - Getting in Line
216 - Getting in Line Computer networking requires that the computers in the network be linked. This ...
- poj 2378 树型dp
和poj1655那道求树的重心基本上一样的,代码也没多大改动. 详情请见 #include<cstdio> #include<algorithm> #include<cs ...
- php memcached缓存集群
一.需求描述 一linode xen vps 1G RAM,40+sites,IO频繁,openfiles ulimit已65535 US时间访问量大增,nginx不定时502 二.解决办法 page ...
- 纯Java代码 图片压缩
Java图片压缩代码 package com.img; import java.awt.Image; import java.awt.image.BufferedImage; import java. ...
- input中的name,value以及label中的for
input具有很多属性,比较常用的有type,value,name,placeholder,multiple,checked等.对于其中的name.value.label相关以及标签外的文字,我一直是 ...
- codevs1993草地排水(最大流)
最近学了最大流,于是去codevs找了几道最大流裸题(这是我第一次写网络流). 题目大意:求一个图的最大流(就是这样的裸题) 第一次A网络流的题,发个博客纪念一下. var n,m,i,j,k,h,t ...
- Java中修饰符
下面这张图应该大家都见过,根据图表来记忆最好理解 范围 private friendly(默认) protected public 当前类 √ √ √ √ 当前包中的类 √ √ √ 当前包中的类, ...
- Sara Chipps
"To be a developer you really need to love to learn because you're going to be learning your en ...
- JAVA-代理学习一之JDK实现
代理的实现依赖于反射,建议不太懂反射的童鞋先看看反射相关的知识点. 代理可以理解为对实际调用方法的一种能力的加强. 代理分为静态代理和动态代理: <1> 静态代理示例 接口MyInterf ...