CSS3组件化之单线箭头
<div class="parent-box"> <div class="top-arrow"></div> <div class="right-arrow"></div> <div class="bottom-arrow"></div> <div class="left-arrow"></div> </div>
.parent-box{ position: relative; width: 500px; height: 300px; } //箭头向上 .top-arrow { position: absolute; left: 50%; top:; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-left: 0.05rem solid #b2b2b2; border-top: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向右,类似 > .right-arrow { position: absolute; right:; top: 50%; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-right: 0.05rem solid #b2b2b2; border-top: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向下 .bottom-arrow { position: absolute; right: 50%; bottom:; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-right: 0.05rem solid #b2b2b2; border-bottom: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向左,类似 < .left-arrow { position: absolute; left:; top: 50%; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-left: 0.05rem solid #b2b2b2; border-bottom: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
CSS3组件化之单线箭头的更多相关文章
- CSS3组件化之圆波扩散
本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...
- CSS3组件化之ios版菊花loading
<div class="juhua-loading"> <div class="jh-circle1 jh-circle-ios">&l ...
- CSS3组件化之菊花loading
<div class="juhua-loading"> <div class="jh-circle"></div> < ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 实现checkbox组件化(Component)
之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...
- 10 款提高开发效率的 jQuery/CSS3 组件
前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件.今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件.部分插件可以下载 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...
随机推荐
- NameValuePair方式传参数
今天工作中联调外部的一个接口用post方式传输,我按照文档封装参数成Jason字符串传入,但是对方一直接受参数为空,折腾了半天也没找到问题.很苦恼,检查代码都没有错误,可是为什么对方接受参数为空呢?然 ...
- Linux dig命令
dig(Domain Information Groper),和nslookup作用有些类似,都是DNS查询工具 1.dig命令格式 dig @dnsserver name querytype 如果你 ...
- Python练习-猜年龄的LowB游戏
Alex大神今天让我做一个猜年龄的游戏: 第一个游戏是你只能猜三次:真的很LowB啊~ # 编辑者:闫龙 #猜年龄游戏,3次后程序自动退出! ages = 29; #for循环3次 for i in ...
- 【bzoj题解】2186 莎拉公主的困惑
题目传送门. 题意:求\([1,n!]\)中与\(m!\)互质的数的个数,对质数\(R\)取模,\(n\geq m\). 答案应该等于\(\frac{n!}{m!}\phi(m!)=\frac{n!} ...
- perl6: hash小笔记
> ,,, { => , => } > my $a = :%h h => { => , => } > $a.perl :h({, }) > my ...
- linux bash shell之declare
一. #Set the right GC options based on the what we are runningdeclare -a server_cmds=("master&qu ...
- 【本地服务器】用nodejs搭建最简单、轻量化的http server
1. 引言 前端程序猿主要关注的是页面,你可能根本就用不到.net,java,php等后台语言. 但是你制作出来的网页总要运行.总要测试吧?——那就免不了用到http server.我先前都是用vis ...
- java基础52 编码与解码
1.解码与编码的含义 编码:把看得懂的字符变成看不懂的码值,这个过程就叫编码 解码:根据码值查到相对应的字符,我们把这个过程就叫解码 注意:编码与解码时,我们一般使用统一的码表,否则非常容易出现 ...
- sql server 提取汉字/数字/字母的方法
sql server 提取汉字/数字/字母的方法 --提取数字 IF OBJECT_ID('DBO.GET_NUMBER2') IS NOT NULL DROP FUNCTION DBO.GET_NU ...
- web项目引入extjs小例子
一个新的项目,前端用extjs实现!分享一下extjs开发的准备工作! 首先去下载extjs的资源包,这里我是随便在网上下载的! 打开之后 ,目录是这样的! 需要关注的几个文件夹: builds:压缩 ...