文档章节

CSS实现的气泡小三角

laichendong
 laichendong
发布于 2014/06/25 09:27
字数 1260
阅读 83
收藏 0
点赞 0
评论 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
粉丝 8
博文 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
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar
2017/09/27
0
0
基于Qt开发QQ气泡式聊天界面的技术建议

最近在写IM 聊天界面,想设计出一个类似QQ气泡聊天的样式 使用了几种办法 1:使用Qt下面的QListview来实现QQ类似效果,差强人意 2:使用QWebview加载html css样式来完成,发现效果不错,但是...

toby520
2014/06/24
2.3K
8
分享一个纯CSS开发的气泡式提示框

日期:2012-4-11 来源:GBin1.com 在线演示 在线调试 本地下载 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我...

gbin1
2012/04/12
0
0
css三角形原理

前言:   在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对...

羊皮卷
2016/12/13
10
0
【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十
04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
4
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
165
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部