CSS伪元素非常有用，它提供了一种无需多余的DOM元素来实现一些常见的功能的方法，以下利用其实现一个带三角形的tooltip。

下面是DOM结构：

下面是对应的CSS样式：

XML/HTML Code复制内容到剪贴板 <divclass="tooltip-wrapperbottom"> <divclass="arrow"></div> <divclass="content"> Thisiscontent </div> </div> CSS Code复制内容到剪贴板 .tooltip-wrapper{ position:absolute; z-index:9999; padding:5px; background:white; border:1pxsolid#7d7d7d; border-radius:5px; } .tooltip-wrapper.arrow, .tooltip-wrapper.arrow:after{ position:absolute; display:block; width:0; height:0; border-color:transparent; border-style:solid; } .tooltip-wrapper.arrow{ border-width:11px; } .tooltip-wrapper.arrow:after{ content:""; border-width:10px; } .tooltip-wrapper.bottombottom.arrow{ top:-11px; left:50%; margin-left:-11px; border-top-width:0; border-bottom-color:#7d7d7d; } .tooltip-wrapper.bottombottom.arrow:after{ top:1px; margin-left:-10px; border-top-width:0; border-bottom-color:white; }

以上这篇利用CSS伪元素创建带三角形的提示框的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。

原文地址：http://www.cnblogs.com/clumiere/p/4497588.html