最终结果图：
根基道理
先设定一个配景致的普通div盒子，然后利用上篇post获得的三角型图标，把div盒子配置为相对定位模式，三角型图标配置为绝对定位，位置相对付div盒子，调解到符合的位置。这样就获得一个根基的tooltip，可是没有边框看起来老是不舒服，我们可以给div盒子配置一个边框，这没什么难度，可是三角形图标如何配置边框呢？这里我们通过一个取巧的方法，让两个差异颜色的三角形图标叠加，而且位置错开1px，这样底层三角形top border被粉饰，只暴露阁下border部门，叠加在一起我们就获得一个看似带边框的三角形图标。
step by step
1.先界说一个相对定位的盒子div：
<div> </div>
css：
.tooltips{ position:relative; width:300px; height:80px; line-height:60px; background:#D7E7FC; border-radius:4px; }
结果：
2.接下来操作上篇post的常识我们给div盒子添加一个三角型图标：
<div> <div></div> </div>
三角形图标css:
.arrow{ position:absolute; color: #D7E7FC; width: 0px; height:0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; bottom: -20px; right: 50%; }
结果：
初具雏形，甚至可以拿来直接用了，可是假如tooltip配景致和方针配景致重合，那么我么就很难判别出来了，所以我们需要给它界说个border。
3.添加border
css:
.tooltips{ position:relative; width:300px; height:80px; line-height:60px; background:#D7E7FC; border:1px solid #A5C4EC; border-radius:4px; }
结果：
盒子有了边框结果，可是下面的小三角还没有被“掩护”起来，这对付童贞座来说的确是不能容忍的！
4.给“小三角穿上松紧带”
前面在讲授道理时我们已经说过，需要利用两个三角形叠加的方法，首先我们界说两个三角形的div，一个配景致和盒子的边框颜色沟通，一个配景致和盒子的配景致一致：
<div> <div></div> <div></div> </div>
css界说如下：
.arrow{ position:absolute; width: 0px; height:0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; } .arrow-border{ color: #A5C4EC; bottom: -20px; right: 50%; } .arrow-bg{ color: #D7E7FC; bottom: -19px; right: 50%; }
留意：.arrow-bg和.arrow-border的bottom位置相差为1px（可按照边框宽度调解）两个div的顺序不行颠倒。
我们来看看最终结果：
ok!大功告成，ie6下跑一下，完全兼容！