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 元素必 ...
随机推荐
- 文件读取 FILE
需要了解的概念 [数据流][缓冲区(Buffer)][文件类型][文件存取方式][借助文件指针读写文件] 需要理解的知识点包括:数据流.缓冲区.文件类型.文件存取方式 1.1 数据流: 指程序与数据的 ...
- JS日期与字符串相互转换!!
一 日期转字符串 dateToString: function(date){ var year = date.getFullYear(); var month =(date.getMonth() + ...
- 2 - django-urls路由系统基本使用
目录 1 路由系统(urls控制) 1.1 正则字符串参数 1.2 url的分组 1.2.1 无名分组 1.2.2 有名分组 1.3 URLconf 在什么上查找 1.4 include(路由分发) ...
- python基础之命名空间
前言 命名空间通俗的理解就是对象或变量的作用范围,在python中分为局部命令空间.模块命名空间和build-in全局命名空间. 局部命名空间 局部命名空间即在一个函数或一个类中起作用的变量或引用的字 ...
- sleep命令
sleep支持睡眠(分,小时) sleep 1 睡眠1秒 sleep 1s 睡眠1秒 sleep 1m 睡眠1分 sleep 1h 睡眠1小时
- aarch64_l4
livestreamer-1.12.2-7.fc26.noarch.rpm 2017-02-11 17:38 537K fedora Mirroring Project lizardfs-adm-3. ...
- 在使用FastJson开发遇到的的坑
1.list中放入同一个对象,会出现内存地址引用{"$ref":"#[0]"},后台可以识别,但是前台不会识别 @Test public void testLi ...
- C++ : Boost : Rational 有理数类
因为一些不为人知的原因, 我需要一些能减少我程序误差的东西.于是找到了这个类. 然后下载了Boost这个庞大的库. 安装与配置 在官网上找到下载地址, 大概有71MB, 下来来解压到任意位置就好了. ...
- HDU 4597 Play Game(区间DP(记忆化搜索))
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 题目大意: 有两行卡片,每个卡片都有各自的权值. 两个人轮流取卡片,每次只能从任一行的左端或右端 ...
- 算法笔试题整理——升级蓄水池 && 字符串数字表达式计算值 && 求旅游完所有景点需要的最少天数 && 宝箱怪
1. 小米笔试题——升级蓄水池 题目描述: 在米兔生活的二维世界中,建造蓄水池非常简单. 一个蓄水池可以用n个坐标轴上的非负整数表示,代表区间为[0-n]范围内宽度为1的墙壁的高度. 如下图1,黑色部 ...