<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. sklearn_k邻近分类_KNeighborsClassifier

    # coding:utf-8 import numpy as np import matplotlib.pyplot as plt from sklearn.neighbors import KNei ...

  2. php Only variables should be passed by reference 报错问题

    这个错误是变量引用引起的非致命错误,可修改php.ini文件的error_reporting = E_ALL & E_NOTICE 使其屏蔽此错误

  3. js数据类型隐式转换问题

    js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...

  4. Web 前端开发规范文档

    通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统 ...

  5. python 面试题4

    Python面试题 基础篇 分类: Python2014-08-08 13:15 2071人阅读 评论(0) 收藏 举报 最近,整理了一些python常见的面试题目,语言是一种工具,但是多角度的了解工 ...

  6. Awk基础

    Awk文本处理 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.awk数据可以来自标准输入.一个或多个文件,或其它命令的输出.awk通常是配合脚本进行使用, 是一个强大的文本处 ...

  7. servlet Filter过滤javascript

    新建HttpServletRequestWrapper子类XssHttpServletRequestWrapper import javax.servlet.http.HttpServletReque ...

  8. 一种获取xml文件某个节点内容的shell方法

    配置文件 config.xml <xml> <server> <name>srv-01</name> </server> <serve ...

  9. go 切片的 插入、删除

    package main import ( "fmt" ) func InsertSpringSliceCopy(slice, insertion []string, index ...

  10. java基础58 JavaScript的几种格式和变量的声明方式(网页知识)

    1.JavaScript的几种格式 1.1.JavaScript的特点 1.跨平台性    2.安全性.(javaScript代码不能直接访问电脑硬盘上的信息) 1.2.Java与javaScript ...