CSS快速入门-箭头和图标
一、三步搞懂箭头产生的原理
在前面的盒子模型一文中,我们已经知道了一个元素空间占位。为了弄明白箭头的产生,我们可以三步走:
#demo12 {
border: 100px solid;
border-color:green blue orange red;
width:100px;
height:100px;
} <div id="demo12"></div>
第一步:设置一个div,然后给他设置样式:边框100px,上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100。
效果图如下:
第二步:我们可以看到中间一个正方形,就是我们设置的长和框:100px*100px。假如把width和height都设置成0的话,会有什么样的情景呢?
content拿掉后,其实就是变成一个点了,然后就变成下图了:
第三步:三角形是不是有了?而且还有四个,这时我们只需要取其中想要的任意一个方向的三角形即可。比如我们要取绿色的三角形。看好了,一句话就出来了:
将上面的代码修改一行代码:
border-color:green transparent transparent transparent;
同理,如果你要取蓝色的、橘色的、红色的,随便可以取到。
除了获取上面三角形以外,我们还可以获取上面每个三角形的一般,也就是一个小的三角形(left或right):
这时,我们再加一行代码即可获取:
#demo12 {
border: 100px solid;
border-color:green transparent transparent transparent;
border-left:transparent;
width:0px;
height:0px;
}
加上border-left:transparent;后,我们可以获取right的部分,结果如下:
同理,要获取left部分,可以设置border-right:transparent;
二、箭头在实际中的使用和实现
在很多网站上,我们随处可以见到箭头。
比如淘宝网:
实例1:
这个比较简单,就是一个向右的箭头,我们将top、right、bottom均设置为透明色即可获得。
#demo12 {
border: 10px solid;
border-color:transparent transparent transparent orange;
width:0px;
height:0px;
}
实例2:
这个也非常简单,我们从上面的四个三角形中,把bottom的三角形去掉即可,也就是把bottom的三角形设置为透明色:
#demo12 {
border: 50px solid;
border-color:orange orange transparent orange;
width:0px;
height:0px;
}
实例3:
这个比较明显,就是两个向右的三角形叠加而成。
思路如下:
设置2个div,其中一个相对定位,另外一个绝对定位,这样就可以控制两个div的位置了。
然后获取2个div的右向箭头即可。talk is cheap,show me the code!
.demo{
border: 50px solid;
border-color:transparent transparent transparent orange;
width:0px;
height:0px; }
.demo12 {
position:relative;
float:left;
}
.demo13 {
position:absoulte;
margin-top:-52px;
} <div class="demo demo12">
<div class="demo demo13"></div>
</div>
效果图如下:
实例4:
这个例子的实现通过一个正方形+一个三角形就可以了。
#demo1 { #设置一个长方形,且为相对定位,为后续附加在它身上的三角形准备
width: 100px;
height: 40px;
background-color: orange;
position: relative;
border: 4px solid #333;
left:30px;
line-height:40px;
}
#设置整体样式
#demo1:after, #demo1:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
#在长方形的右边形成一个橘色的三角形(这里主要用于覆盖黑色的三角形,起到填充的作用)
#demo1:after {
border-width: 9px;
border-right-color: orange;
top: 15px;
}
#在长方形的右边形成一个黑色的三角形(这里主要要用他的黑色边框)
#demo1:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
} <div id="demo1">我是箭头测试</div>
效果图如下:
CSS快速入门-箭头和图标的更多相关文章
- CSS快速入门(四)
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- #001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...
- CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- CSS快速入门基础篇,让你快速上手(附带代码案例)
1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...
随机推荐
- [翻译] OrigamiEngine
OrigamiEngine https://github.com/ap4y/OrigamiEngine Lightweight iOS and OSX audio engine with opus, ...
- Forefront TMG 之 ISP 冗余传输链路(ISP-R)
在 Forefront TMG 中,新增了ISP 冗余传输链路功能:在 TMG 中,你可以同时使用两条活动的外部链路,使用模式分为以下两种: 故障转移模式:在主要链路工作正常的情况下,所有的流量都通过 ...
- [转]CentOS7增加或修改SSH端口号
前言:开启某服务或软件的端口,要从该服务或软件监听的端口(多以修改配置文件为主),SeLinux和防火墙(FireWall)的安全策略下手.如果使用阿里云,腾讯等第三方服务器还需要对管理控制台的安全组 ...
- el表达式便利map集合
<c:forEach items="${b.goodMap}" var="entry" varStatus="status"> ...
- 【001】JS解析,反解析XML的一些问题
JS解析,反解析 XML 的一些问题 2016-03-25 15:38:28 星期五 文章底部下面有提供把 字符串 变成 XML 对象的方法. 该方法,在 Chrome48 ,FireFox ,IE1 ...
- React Native 基础报错及解决方案记录
刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to fin ...
- 20165318 2017-2018-2 《Java程序设计》第二周学习总结
20165318 2017-2018-2 <Java程序设计>第二周学习总结 教材学习内容总结 本周学习了第二章和第三章的内容,掌握了Java中基本数据类型.数组.运算符.表达式和语句等方 ...
- BZOJ5329:[SDOI2018]战略游戏(圆方树,虚树)
Description 省选临近,放飞自我的小Q无心刷题,于是怂恿小C和他一起颓废,玩起了一款战略游戏. 这款战略游戏的地图由n个城市以及m条连接这些城市的双向道路构成,并且从任意一个城市出发总能沿着 ...
- 1066. [SCOI2007]蜥蜴【最大流】
Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃 到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到 ...
- virtualbox+vagrant学习-2(command cli)-5-vagrant halt命令
Halt 格式: vagrant halt [options] [name|id] 该命令关闭vagrant管理的正在运行的机器. userdeMacBook-Pro:~ user$ vagrant ...