今天小编跟大家讲解下有关利用CSS伪元素创建带三角形的提示框的实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS伪元素创建带三角形的提示框的实现方法 的相关资料，希望小伙伴们看了有所帮助。
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
来源：爱蒂网
