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 元素必 ...
随机推荐
- C++中全排列函数next_permutation用法
最近做了TjuOj上关于全排列的几个题,室友告诉了一个非常好用的函数,谷歌之,整理如下: next_permutation函数 组合数学中经常用到排列,这里介绍一个计算序列全排列的函数:next_pe ...
- Python练习-内置函数的应用
说真的,我感觉这几天egon没有睡好,或者是egon心里有事儿,练习给留的太过简单了 # 编辑者:闫龙 # 用map来处理字符串列表,把列表中所有人都变成sb,比方alex_sb #name=['al ...
- UNIX网络编程 第6章 I/O复用:select和poll函数
UNIX网络编程 第6章 I/O复用:select和poll函数
- Spring Boot1.5X升级到2.0
配置文件 大量的Servlet专属的server.* properties被移到了server.servlet下 拦截器 public class MyWebMvcConfigurerAdapter ...
- win10定时关机
CMD 输入shutdown -s -t 7200这个命令,大家可以自已设置7200这个时间,自己算一下60分钟=3600秒:
- Scrapy项目之User timeout caused connection failure(异常记录)
Windows 10家庭中文版,Python 3.6.4,Scrapy 1.5.0, 提示:此文存在问题,真正测试, 请勿阅读, 07-14 14:26更新: 经过两个多小时的测试,发现此问题的原因是 ...
- xgboost gbdt特征点分烈点
lightGBM与XGBoost的区别:(来源于:http://baijiahao.baidu.com/s?id=1588002707760744935&wfr=spider&for= ...
- Service(一):认识service、绑定Service
Activity是与用户打交道的,而Service是在后台运行的. 这个程序介绍了下如何启动和停止一个Service,以及在后台打印消息,我添加了一些注释. 在activity_main中将布局改为线 ...
- 洛谷P3203弹飞绵羊
传送门啦 非常神奇的分块大法. 每块分 √N 个元素 , 预处理出来:对于每个点,记录两个量:一个是它要弹几次才能出它所在的这个块,另外一个是它弹出这个块后到哪个点. 查询操作:一块一块跳过去 单次复 ...
- MySQL学习笔记:删除存储过程和函数
删除存储过程.存储函数主要使用drop语句: drop procedure —— 删除存储过程 drop function —— 删除存储函数 语法: DROP {PROCEDURE|FUNCTI ...