气泡框或者提示框是网页很常见的，实现它的方式有很多，我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置，但是用这种方式维护很麻烦，比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等。下面我们来学习下使用html+css来实现这种效果！

如下效果：

如图：

如果我们继续把div的宽度和高度设为0的话 那么四边会成了三角形了。

但是IE6下 上下是三角形 左右是矩形框：
如下：


通过实验发现当把div的font-size和line-height都设为0的时候，div的四边在IE6下都能形成完美的三角形：代码如下：

很明白我们只需要一个三角形，那么我们只需要把其他三边颜色设置为透明或者设置为和背景颜色相同就可以制作出一个三角形出来了，将其他三边颜色设置为透明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随之改变。如下代码：

但是在IE6下 又有问题了 IE6不支持透明 transparent 如下：


但通过实验发现把border-style设置为dashed后，IE6下其他三边就能透明了！如下：


还是上面的代码 改成如下：

现在我们已经可以模拟出一个小三角形了，那么下面我们可以利用矩形和三角形结合起来使用 做个demo来实现上面2个效果了！首先我们先设计一个矩形框 然后把小三角形定位到矩形框上来。如下图：


代码如下：

    我在气泡框内

现在指示方向的三角形箭头是实心的，而我们想要的是空心的效果，我们再叠加一个同气泡框背景颜色一样的小三角，然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整，如下图：


代码如下：

    我在气泡框内

这个效果不错，css还是挺强大的