文档章节

CSS实现的气泡小三角

laichendong
 laichendong
发布于 2014/06/25 09:27
字数 1260
阅读 103
收藏 0
像下图这样的气泡设计已经遍布大街小巷了。在css3下,圆角已经不是问题了。但是,那个小三角形是如何实现的呢?接下就来分析一下。 20130805210352  

一、2B工程师的做法

看似牛B的2B工程会说:“这个难不倒我,我一个像素画一个div。给你堆一个三角型出来!”然后就花了N小时写了一坨晦涩难懂的JS,“生成”了这样一个三角形。然后自己在那很有成就感!嗯,我只能说这是2B工程师炫技的做法。

二、普通工程师的做法

普通工程师会说:“这有什么好琢磨的。弄个小三角的图片,绝对定位上去不久搞定了吗?我当年做圆角就是这么实现的,还能自适应大小呢!”嗯,普通程序员还是有进步,可是先不说图片带来的网络开销等等,如果我今天想用这个颜色的,明天想用这个颜色的气泡。或者同时有N种颜色的气泡。每种的小三角还分上下左右4个位置。这~~~~,不说了,都是泪。

三、文艺工程师的做法

其实上面说那么多,不就是为了衬托一下接下来要说的这种做法么。^_^,好了,上硬菜!我们用纯的css就能搞定他,而且很简单。 我们想一下,貌似css只能话矩形,有了css圆角属性之后能画圆角矩形,变通一下能画出椭圆,圆形什么的,但好像真不能画出三角形啊。真的不能吗?往下看。 一个宽高为100px,边框粗细也为100px的正方形。
.demo {
	margin: 50px auto;
	width:100px;
	height:100px;
	border:100px solid #f60;
}
20130805221706 没什么,挺平常的。这时候 我给每个方向上的边框设置成不同的颜色
.demo {
	margin: 50px auto;
	width:100px;
	height:100px;
	border:100px solid #f60;
	border-top-color: #f60;
	border-right-color: #f90;
	border-bottom-color: #fc0;
	border-left-color: #ff0;
}
效果成了这样: 20130805222350 好像还挺漂亮,意识到什么了吗?好,再进一步变化, 我将正方形的宽高都设成0
.demo {
	margin: 50px auto;
	width:0;
	height:0;
	border:100px solid #f60;
	border-top-color: #f60;
	border-right-color: #f90;
	border-bottom-color: #fc0;
	border-left-color: #ff0;
}
变成了这样: 20130805222641   哇,三角形出来了!我想聪明的你应该知道怎么回事儿了。对, 将其他方向的边框设成透明,只留下一个方向,就成了三角形了。噔噔噔噔~~ 20130805223812   OK, 把这个三角形定位到圆角矩形上就是一个气泡了。想要不同的方向的三角形,只需要保留不同方向上的边框颜色即可。下面是比较完整的示例代码:
<div class="tip">
	&nbsp;
</div>
.tip {
	margin: 100px auto;
	padding: 10px;
	width: 200px;
	background: #ccc;
	border-radius: 5px;
	position:relative;
}
.tip:after {
	content:"";
	display: block;
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top-color: #ccc;
	position:absolute;
	bottom:-20px;
	left:10%;
}
效果就是第一张图中的样子。 那 如果要求气泡像示例中的第二个一样有边框呢? 稍微思考变通一下,我们就会得到答案: 绘制两个这样的三角形,一个是气泡边框的颜色,在下面,一个是气泡本身的颜色,在上面,然后上面的三角形,往气泡方向上偏移一个像素,就大功告成了。上代码:
<div class="tipWithBorder">
	&nbsp;
	<div class="arrow"></div>
</div>
.tipWithBorder {
	background: #e3e3e3;
	border: 1px solid #666;
}
.arrow{
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top-color: #000;
	position:absolute;
	bottom:-20px;
	left:10%;
}
.arrow:before {
	content:"";
	display: block;
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top-color: #e3e3e3;
	position:absolute;
	bottom:-9px;
	left:-10px;
}
好吧, 如果你足够细心,也许你会发现,小三角的边框颜色比气泡的颜色稍微淡一些。所以一般你需要将下面那个三角形的颜色比边框的气泡边框的颜色调的深一些才行。 20130805225514   ok,我们来解释一下这个现象的原因,我们看产生这个边框的原理图 20130805230644   看上图的左下角,蓝线表示的上层三角形向下偏移了1px。红色线长度就是产生的三角形的边框的宽度。上图中,蓝色线,红色线和红色三角形的一段边,组成了一个等腰直角三角形,红色线是腰,蓝色线是底边。ok,我们知道蓝色线是1px。那红色线到底多长呢?根据勾股定理,设红色线长x。则 x² + x² = 1²     so: x = 二分之一的平方根 ≈ 0.7071 好吧, 原来是宽度不够1像素的引起的颜色变淡,只不过你的眼睛分不出来这0.3像素的粗细差别而已,但显示器渲染的时候显示出了颜色上的差距。 使用同样的方法,我们知道如果要使小三角形的边框宽度为1px。则需要覆盖在上面的三角形偏移根号2像素,而不是1像素来完成。但是实验过后,发现在chrome和firefox下都未能达到理想效果。

© 著作权归作者所有

共有 人打赏支持
laichendong
粉丝 10
博文 85
码字总数 71483
作品 0
朝阳
程序员
CSS使用的一些小技巧/高级进阶(持续更新)

最近闲暇时间在看鑫爷的《CSS世界》,内容真的是非常精彩,很多细节分析的非常透彻,值得推荐。在日常开发中实现某种效果有很多方式,但是下面的我以前都很少用到,原来css还可以这么玩 😂...

giants_one
06/26
0
0
纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

互联网拥有很多免费的工具和应用,几乎可以帮助你实现任何你需要的UI组件和设计,大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗?今天我们将介绍一个在线的生成气泡式提示的web工具 ...

柠檬酷
2015/10/14
156
0
分享5个实用而且美观的CSS3实例

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。 用纯CSS也可以实现各种各样很酷的效果了,甚...

小编辑
2010/06/29
835
3
7 个超级震撼的 CSS3 按钮组合

我们可以用精美的背景图片和CSS代码制作出非常漂亮的按钮,但在某些特殊的页面上,或者你需要让按钮更有动感从而让你的用户眼前一亮,那么就试试 用CSS3技术吧,CSS3新增的很多属性能让按钮具...

tp_wire
2012/06/30
9.7K
28
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

flume -- fileChannel简要分析其过程

flume之event写入FileChannel doPut(event)-->获取共享锁后[log.lockShared();]-->FlumeEventPointer ptr = log.put(transactionID, event); 此处的log.put即将transactionID及event进行后续......

-九天-
33分钟前
2
0
Linux与FreeBSD有什么区别?

基础 许多人所称的“Linux”实际上不是 Linux。Linux 从技术上说只是 Linux 内核,典型的 Linux 发行版则包括了 Linux 内核和许多软件。这是为什么 Linux 有时被称为 GNU/Linux。事实上,许多...

linux-tao
41分钟前
3
0
jQuery学习笔记180924

jQuery - AJAX 简介 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示...

颖伙虫
54分钟前
1
0
springboot整合vue小试牛刀

序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-we......

go4it
55分钟前
2
0
使用python的profiler工具

主要用来检测python coding的执行时间 fly profiler

steel7c4
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部