有人穷途末路，夕阳西下，却是有人的崭新起点，旭日东升。如果没有你，我不爱旅游，再美的风景也比不过你的发梢。
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
