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选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...
随机推荐
- Gogs集成AD域LDAP
操作步骤: 添加认证源 使用管理员账号登录Gogs,进入控制面板→认证源管理→添加新的源 设置如图所示 使用ldap认证源登录 配置成功后,登录时可选择认真源,界面如图所示
- spring-boot-jpa 自定义查询工具类
1.pom文件中添加如下配置 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...
- October 08th 2017 Week 41st Sunday
Talent wins games, but teamwork and intelligence wins championships. 才华让你赢得比赛,团队及智慧让你赢得冠军. But the m ...
- 新手学Linux:在VMware14中安装CentOS7详细教程
VMware Workstation14安装CentOS7.0 详情教程 1.准备工作 a)下载VMware workstation14 b)下载CentOS7 c)下载SSH Secure Shel ...
- 浅析Java CompletionService
JDK的CompletionService提供了一种将生产新的异步任务与使用已完毕任务的结果分离开来的服务.生产者 submit 运行的任务.使用者 take 已完毕的任务,并依照完毕这些任务的顺序处 ...
- 在myeclipse的工作环境上配置默认编码为UTF-8
将默认环境转为UTF-8,看图分析: 在windows->Preferences上 这样整个环境就变成UTF-8,只是这样还不够, 还须要,假设你须要所有文件都设为UTF-8,就: wa ...
- BZOJ2286:[SDOI2011]消耗战(树形DP,虚树)
Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...
- 【转】iOS:AvPlayer设置播放速度不生效的解决办法
现象: 项目有一个需求是实现视频的慢速播放,使用的是封装的AvPlayer,但是设置时发现比如设置rate为0.5,0.1,0.01都是一样的速度,非常疑惑.后来经过查找资料,发现iOS10对这个AP ...
- TensorFlow函数(七)tf.argmax()
tf.argmax(input, dimension, name=None) 参数: input:输入数据 dimension:按某维度查找. dimension=0:按列查找: dimension= ...
- 用C#给程序加启动画面并只允许一个应用程序实例运行
. 启动画面类: public class SplashForm : System.Windows.Forms.Form { private System.Windows.Forms.PictureB ...