<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组件化之单线箭头的更多相关文章

  1. CSS3组件化之圆波扩散

    本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...

  2. CSS3组件化之ios版菊花loading

    <div class="juhua-loading"> <div class="jh-circle1 jh-circle-ios">&l ...

  3. CSS3组件化之菊花loading

    <div class="juhua-loading"> <div class="jh-circle"></div> < ...

  4. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  5. 实现checkbox组件化(Component)

    之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...

  6. 10 款提高开发效率的 jQuery/CSS3 组件

    前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件.今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件.部分插件可以下载 ...

  7. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  8. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  9. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

随机推荐

  1. C++中全排列函数next_permutation用法

    最近做了TjuOj上关于全排列的几个题,室友告诉了一个非常好用的函数,谷歌之,整理如下: next_permutation函数 组合数学中经常用到排列,这里介绍一个计算序列全排列的函数:next_pe ...

  2. Python练习-内置函数的应用

    说真的,我感觉这几天egon没有睡好,或者是egon心里有事儿,练习给留的太过简单了 # 编辑者:闫龙 # 用map来处理字符串列表,把列表中所有人都变成sb,比方alex_sb #name=['al ...

  3. UNIX网络编程 第6章 I/O复用:select和poll函数

    UNIX网络编程 第6章 I/O复用:select和poll函数

  4. Spring Boot1.5X升级到2.0

    配置文件 大量的Servlet专属的server.* properties被移到了server.servlet下 拦截器 public class MyWebMvcConfigurerAdapter ...

  5. win10定时关机

    CMD  输入shutdown -s -t 7200这个命令,大家可以自已设置7200这个时间,自己算一下60分钟=3600秒:

  6. Scrapy项目之User timeout caused connection failure(异常记录)

    Windows 10家庭中文版,Python 3.6.4,Scrapy 1.5.0, 提示:此文存在问题,真正测试, 请勿阅读, 07-14 14:26更新: 经过两个多小时的测试,发现此问题的原因是 ...

  7. xgboost gbdt特征点分烈点

    lightGBM与XGBoost的区别:(来源于:http://baijiahao.baidu.com/s?id=1588002707760744935&wfr=spider&for= ...

  8. Service(一):认识service、绑定Service

    Activity是与用户打交道的,而Service是在后台运行的. 这个程序介绍了下如何启动和停止一个Service,以及在后台打印消息,我添加了一些注释. 在activity_main中将布局改为线 ...

  9. 洛谷P3203弹飞绵羊

    传送门啦 非常神奇的分块大法. 每块分 √N 个元素 , 预处理出来:对于每个点,记录两个量:一个是它要弹几次才能出它所在的这个块,另外一个是它弹出这个块后到哪个点. 查询操作:一块一块跳过去 单次复 ...

  10. MySQL学习笔记:删除存储过程和函数

    删除存储过程.存储函数主要使用drop语句: drop procedure  —— 删除存储过程 drop function  —— 删除存储函数 语法: DROP {PROCEDURE|FUNCTI ...