纯css实现圆角带箭头的提示框效果(非css3)

博客 - html/css/xml/xsl

纯css实现圆角带箭头的提示框效果(非css3)

实现效果如下图：

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:#ddd;}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:#f3f3f3;}
.rc_box1 { border-width:1px; line-height:1.5;}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px;}
.ov1,.ov2 { position:absolute; left:44%; overflow:hidden; width:0; height:0; border-left:6px dotted transparent; border-right:6px dotted transparent;border-top:6px solid transparent;}
.ov1 { top:26px; border-top-color:#ddd;}
.ov2 { top:25px; border-top-color:#f3f3f3;}

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

.gray,.gray .rc_box2,.gray .rc_box3 {border-color:#ddd;}
.gray .rc_box2,.gray .rc_box3 { background-color:#f3f3f3;}
.gray .ov1 { border-top-color:#ddd;}
.gray .ov2 { border-top-color:#f3f3f3;}