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 元素必 ...
随机推荐
- sklearn_k邻近分类_KNeighborsClassifier
# coding:utf-8 import numpy as np import matplotlib.pyplot as plt from sklearn.neighbors import KNei ...
- php Only variables should be passed by reference 报错问题
这个错误是变量引用引起的非致命错误,可修改php.ini文件的error_reporting = E_ALL & E_NOTICE 使其屏蔽此错误
- js数据类型隐式转换问题
js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...
- Web 前端开发规范文档
通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统 ...
- python 面试题4
Python面试题 基础篇 分类: Python2014-08-08 13:15 2071人阅读 评论(0) 收藏 举报 最近,整理了一些python常见的面试题目,语言是一种工具,但是多角度的了解工 ...
- Awk基础
Awk文本处理 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.awk数据可以来自标准输入.一个或多个文件,或其它命令的输出.awk通常是配合脚本进行使用, 是一个强大的文本处 ...
- servlet Filter过滤javascript
新建HttpServletRequestWrapper子类XssHttpServletRequestWrapper import javax.servlet.http.HttpServletReque ...
- 一种获取xml文件某个节点内容的shell方法
配置文件 config.xml <xml> <server> <name>srv-01</name> </server> <serve ...
- go 切片的 插入、删除
package main import ( "fmt" ) func InsertSpringSliceCopy(slice, insertion []string, index ...
- java基础58 JavaScript的几种格式和变量的声明方式(网页知识)
1.JavaScript的几种格式 1.1.JavaScript的特点 1.跨平台性 2.安全性.(javaScript代码不能直接访问电脑硬盘上的信息) 1.2.Java与javaScript ...