用纯css绘制一个简单的气泡提示框，对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事，但是程序员最不喜欢做的事情是重复造轮子，加上之前小编分享的几个气泡要么过于复杂，通用性不强，要么需要鼠标移上才显示，移植也不方便。所以今天小编来整理一份更纯粹的气泡提示框代码。

气泡提示由一个圆角矩形和一个三角形组成，其中三角形可以利用before或after伪元素来插入。那么，每个提示框在html里面都只需要一个元素了。

我们来看看基础的html代码:

可见每个气泡都只用了一个div元素，三角形箭头部分我们用before伪元素即可。

四个气泡的样式非常接近，不同的只是三角形的位置，为此我们可以定义公共的部分。但是这里没有共用的类名啊，那该怎么弄呢？

我们发现这4个类都以tip-bubble开头，而CSS提供了一个属性选择器，可以让我们进行模糊匹配。

要实现匹配开头等于固定内容的选择器，我们可以这样写。

[class^=tip-bubble]

其中^=代表匹配开头，具体内容为tip-bubble。

下面我们就来为这个选择器定义一些公共的样式。首先，三角形和圆角矩形从某种意义上说是重合的，因此内部元素(包括伪元素)要使用绝对定位。所以整个div要设置为相对定位，让内部元素的位置以div的左上角作为参考点。然后再设置圆角半径、背景颜色、边距、宽高、字体等公共样式。

[class^=tip-bubble]{

display:inline-block;

position:relative;

background-color:#202020;

width:120px;

padding:20px;

color:#CCC;

text-align:center;

font-size:14px;

font-family:微软雅黑;

border-radius:10px;

margin:50px;

}

运行效果如下图所示:

感觉少了点层次感，我们用CSS3的box-shadow属性给气泡加个投影看看。

当然了，提示框的立体感不宜太强，所以跟原始图形错开1个像素就足够了。

[class^=tip-bubble]{

/*其它样式代码省略*/

box-shadow:1px 1px 2px #202020;

-o-box-shadow:1px 1px 2px #202020;

-moz-box-shadow:1px 1px 2px #202020;

-webkit-border-shadow:1px 1px 2px #202020;

}

4行代码功能一致，不同前缀用于兼容不同的浏览器。

以第一行为例，1px 1px 2px #202020代表的是水平和垂直方向都错开1像素，大小为2像素的深灰色(#202020)阴影。4个属性用英文空格分隔，分别代表x方向偏移，y方向偏移，阴影大小和阴影颜色。

运行效果如下图所示:

现在层次感好多了，我们用before伪元素加入三角形箭头看看。

有关注本站《CSS3基本形状汇总》的朋友对三角形的绘制应该不陌生，方法是利用边框的转角实现，只要边框设置得足够粗，那么转角部分就足以让我们完成三角形的绘制了。

本案例不再详解三角形的实现原理，不过大家要是忘了的话，就可以重温下面的原理图。

4个气泡都是绘制三角形，不同的只是位置和角度的区别。所以绘制三角形的部分仍然可以作为公共样式定义到[class^=tip-bubble]的before伪元素中。然后，我们也该用绝对定位了。

[class^=tip-bubble]:before{

content:'';

position:absolute;

width:0;

height:0;

border:15px solid;

}

因为只用到边框，所以width和height都设置为0。

运行效果如下图所示:

伪元素把气泡提示给“挖空”了(实际上是文字颜色)。因为width和height都等于0，所以被挖空的部分实际上都是由边框构成的，结构如下图所示，不难发现它就是4个三角形。

现在我们要为气泡提示补上三角形。以左箭头为例，我们要取的是右边框，所以我们给右边框(border-right)设置跟气泡背景一样的颜色。

这次我们就写在tip-bubble-left类上了。

.tip-bubble-left:before{

border-right-color:#202020;

}

运行效果如下图所示:

现在我们要把箭头移到提示框的左侧，但不难想象，如果背景颜色跟字体颜色不一致，那移到左边以后就一定会显示出一个被切掉一个角的小色块，所以我们应该先让before伪元素的字体颜色变成全透明。你可以使用CSS3的rgba颜色，但更地道的做法，是使用transparent。4个提示框都应该应用该效果，所以这次我们写回到公共的部分。

[class^=tip-bubble]:before{

/*其它样式代码省略*/

color:transparent;

}

运行效果如下图所示:

这下真的只剩下一个三角形了，另外3个边框已经不可见。

我们把箭头移到左侧，这时候用绝对定位将会很方便。只要让left等于伪元素宽度的相反数就可以了。

伪元素的宽度等于左边框粗细+右边框粗细，即30像素。

.tip-bubble-left:before{

border-right-color:#202020;

left:-30px;

}

运行效果如下图所示:

现在我们要让箭头垂直居中，但是气泡的高度会随着文本高度的变化而改变。所以我们改用百分比看看，居中自然就是50%了。

.tip-bubble-left:before{

/*其它样式代码省略*/

top:50%;

}

运行效果如下图所示:

还是没有居中啊。对的，因为定位的参考点是左上角，所以现在是三角形的上顶点对齐到气泡的中心。所以正确的做法是50%-15px(伪元素宽度的一半)。然而CSS3不支持这种写法，但用javaScript来实现又有点杀鸡用牛刀的感觉，所以我们不妨用其它可以控制位置的属性来处理，比如CSS3的transform，或者早期CSS就支持的margin-top。这里我们使用后者。

.tip-bubble-left:before{

/*其它样式代码省略*/

margin-top:-15px;

}

运行效果如下图所示，这回真的居中对齐了:

其它三个方向的实现思路跟左箭头一样，小编就不再重复了，只给出最后的代码。

.tip-bubble-top:before{

border-bottom-color:#202020;

left:50%;

top:-30px;

margin-left:-15px;

}

.tip-bubble-right:before{

border-left-color:#202020;

right:-30px;

top:50%;

margin-top:-15px;

}

.tip-bubble-bottom:before{

border-top-color:#202020;

bottom:-30px;

left:50%;

margin-left:-15px;

}

现在让我们一起来来看下最终的成果吧！

气泡提示框是软件，网页等产品使用频率非常高的元素，高端黑更是目前技术类软件的主流色调，所以本教程的实用价值相当高。HTML元素非常简洁，而CSS代码也完全没有掺杂任何跟提示框无关的样式，移植起来非常方便。另一方面，本文对制作过程每一步的讲解都相当细致，涉及的知识点也不复杂，因此本教程除了为实战的朋友带来便利以外，也非常适合初学者作为实例教程进行学习。