气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框

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

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

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

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

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

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

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

[class^=tip-bubble]

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

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