参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。
以下是成果,兼容主流浏览器,包括ie6。
CSS Code复制内容到剪贴板
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="Content-Language"content="zh-CN"/><metaname="Keywords"content=""/><metaname="Description"content=""/><title></title></head><styletype="text/css">*{margin:0;padding:0;list-style:none;font:normal12px/150%宋体;}body{padding:20px;}.arrow{margin-bottom:20px;}.arrow,.arrows{position:relative;display:block;font-size:0;line-height:0;width:0;height:0;border-color:transparent;border-style:dashed;border-width:5px;}.arrowR,.arrowRs{border-left-color:#aaa;border-left-style:solid;}.arrowRs{border-left-color:#fff;position:absolute;left:-7px;top:-5px;}.arrowR:hover{border-left-color:#f60;}.arrowL,.arrowLs{border-right-color:#aaa;border-right-style:solid;}.arrowLs{border-right-color:#fff;position:absolute;rightright:-7px;top:-5px;}.arrowL:hover{border-right-color:#f60;}.arrowT,.arrowTs{border-bottom-color:#aaa;border-bottom-style:solid;}.arrowTs{border-bottom-color:#fff;position:absolute;left:-5px;top:-3px;}.arrowT:hover{border-bottom-color:#f60;}.arrowB,.arrowBs{border-top-color:#aaa;border-top-style:solid;}.arrowBs{border-top-color:#fff;position:absolute;left:-5px;bottombottom:-3px;}.arrowB:hover{border-top-color:#f60;}.circle{line-height:100%;overflow:hidden;font-family:Tahoma,Helvetica;font-size:18px;color:#aaa;}.circle:hover{color:#f60;}.tipBox{width:200px;margin-top:10px;}.tipBox.hd{height:5px;position:relative;}.tipBox.hd.arrow{position:absolute;top:-5px;left:10px;}.tipBox.hd.arrows{top:-4px;}.tipBox.bd{border:1pxsolid#aaa;padding:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.tipBoxA.arrows{border-bottom-color:#f6f6f6;}.tipBoxA.bd{background:#f6f6f6;}</style><body><aclass="arrowarrowR"></a><aclass="arrowarrowL"></a><aclass="arrowarrowT"></a><aclass="arrowarrowB"></a><aclass="arrowarrowR"><s></s></a><aclass="arrowarrowL"><s></s></a><aclass="arrowarrowT"><s></s></a><aclass="arrowarrowB"><s></s></a><aclass="circle">?</a><divclass="tipBox"><divclass="hd"><sclass="arrowarrowT"><s></s></s></div><divclass="bd">用css做的提示盒子,上三角是纯css,盒子圆角用到css3</div></div><divclass="tipBoxtipBoxA"><divclass="hd"><sclass="arrowarrowT"><s></s></s></div><divclass="bd">用css做的提示盒子,上三角是纯css,盒子圆角用到css3</div></div></body></html>