-
基本原理
首先，建立了一个通用的div框的背景色，然后使用在过去后得到的三角形图标，设置div框相对定位方式，设置三角图标的绝对位置，并调整好位置相对于div框合适的位置。所以我们得到一个基本的提示，但没有边界，它总是看起来不舒服。我们可以为div框设置一个边界，这不是很困难。但是三角形图标是如何设置边框的呢这里我们通过一个巧妙的方式，让三角形图标覆盖两种颜色，交错1px，所以顶部边框覆盖底部的三角形，只露出边界，我们得到一个标准的三角架上。
一步一步地
1。首先定义一个相对位置框div：
Css：
提示{。
职位：相对；
宽度：300px；
身高：80px；
行高：60px；
背景：# d7e7fc；
边界半径：4px；
}
uff1a效应
2。接下来，使用最后一篇文章的知识，我们在div框中添加一个三角形图标：
三角形图标：
箭{。
位置：绝对；
颜色：# d7e7fc；
宽度：0px；
身高：0px；
行高：0px；
边框宽度：0 20px 15px；
边框样式：实心虚线虚线；
边框左彩色：透明；
边框右侧颜色：透明；
下：- 20px；
权利：50%；
}
uff1a效应
它可以直接使用，但是如果工具提示背景颜色和目标背景颜色重合，那么我很难区分它，所以我们需要为它定义一个边框。
三.添加边框
Css：
提示{。
职位：相对；
宽度：300px；
身高：80px；
行高：60px；
背景：# d7e7fc；
边境：1px solid # a5c4ec；
边界半径：4px；
}
uff1a效应
这个盒子有边框效果，但是下面的小三角形没有被保护，这对处女座来说简直是无法忍受的！
4。在小三角形上放一条宽松的带子。
在解释理论之前，我们已经说过，我们需要使用两种三角形叠加法。首先我们定义两个三角区一个背景颜色和框的边框颜色是相同的。一个背景颜色与盒子的背景颜色相匹配。
CSS定义如下：
箭{。
位置：绝对；
宽度：0px；
身高：0px；
行高：0px；
边框宽度：0 20px 15px；
边框样式：实心虚线虚线；
边框左彩色：透明；
边框右侧颜色：透明；
}
箭头边框{
颜色：# a5c4ec；
下：- 20px；
权利：50%；
}
箭头箭头{
颜色：# d7e7fc；
下：- 19px；
权利：50%；
}
Note: the bottom position of.Arrow-bg and.Arrow-border is 1px (which can be adjusted according to the width of the border). 两个div的顺序不能颠倒。
让我们看看最后的效果：
好啊!成功，IE6运行，完全兼容！
在下一篇文章中，我们将通过实施一个jQuery的工具提示插件，提高我们的提示