我如何使用纯CSS创建“工具提示尾巴”？
我刚刚遇到了一个简单的CSS技巧。 看看小提琴...
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>这里有一个盒子阴影的例子，所有最新版本的浏览器都应该支持这个
http://jsfiddle.net/MZXCj/1/
HTML：
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS：
body {font-family:Helvetica,Arial,sans-serif;}
#toolTip {
position:relative;
}
#toolTip p {
padding:10px;
background-color:#f9f9f9;
border:solid 1px #a0c7ff;
-moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
#tailShadow {
position:absolute;
bottom:-8px;
left:28px;
width:0;height:0;
border:solid 2px #fff;
box-shadow:0 0 10px 1px #555;
}
#tail1 {
position:absolute;
bottom:-20px;
left:20px;
width:0;height:0;
border-color:#a0c7ff transparent transparent transparent;
border-width:10px;
border-style:solid;
}
#tail2 {
position:absolute;
bottom:-18px;
left:20px;
width:0;height:0;
border-color:#f9f9f9 transparent transparent transparent;
border-width:10px;
border-style:solid;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
position: relative;
}
#toolTip p {
padding: 10px;
background-color: #f9f9f9;
border: solid 1px #a0c7ff;
-moz-border-radius: 5px;
-ie-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#tailShadow {
position: absolute;
bottom: -8px;
left: 28px;
width: 0;
height: 0;
border: solid 2px #fff;
box-shadow: 0 0 10px 1px #555;
}
#tail1 {
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-color: #a0c7ff transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
#tail2 {
position: absolute;
bottom: -18px;
left: 20px;
width: 0;
height: 0;
border-color: #f9f9f9 transparent transparent transparent;
border-width: 10px;
border-style: solid;
}<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>这里有一个解释来回答你的第一个问题（我会把实际的CSS留给其他人，因为我很懒 - 请提出你认为值得投票的答案！）：
这会创建一个小箭头/三角形效果，即“工具提示尾巴”。 这打动了我的心灵！ 我真的很想知道这是如何工作的！
当使用不同的边缘颜色渲染边界但使用相同的样式（在您的情况下， solid ）时，分隔每对相邻拐角的接缝为对角线。 这与图中所示的groove ， ridge ， inset和outset边框样式非常相似。
请注意，尽管所有浏览器的行为都是相同的，只要我记得，这种行为在CSS2.1规范或CSS Backgrounds and Borders模块中都没有完全定义。 后者有一个描述角落中颜色和样式转换的部分，描述似乎暗示对于具有零角半径的边界来说，渲染的线实际上是一条连接填充边角与角（对等宽边界产生45度角线），但规范仍然警告说这并非总是如此（尤其是因为它甚至没有明确说明边角零半径）.1
通过内容（原始W3C）框模型，在20像素边框中创建40x40区域，内容尺寸被定义为0x0。
用连接四角的对角线分割一个正方形会产生四个直角在正方形中点处相交的直角三角形（见下文）。
顶部，底部和左侧边框为白色，与.tooltiptail元素容器的背景相匹配，而右侧边框为蓝色阴影以匹配工具提示的背景颜色：
border-color: #ffffff #a0c7ff #ffffff #ffffff;
结果就是这样，标注了边框，并使用我可靠的直线工具添加了边界边界：
重定向工具提示尾部只是切换工具提示颜色的问题。 例如，这会产生附在提示底部的尾巴：
border-color: #a0c7ff #ffffff #ffffff #ffffff;
jsFiddle预览
1如果你是遵守标准的坚持者，那么你可能会认为所有这些都是黑客行为。
我只用一个div元素来做这个工具提示。
HTML：
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>
CSS：
.tooltip{
position: relative;
border: 1px solid #73a7f0;
width: 200px;
margin-left: 20px;
padding: 5px 14px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
-webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
content: ' ';
display: block;
position: absolute;
left: -8px;
top: 15px;
width: 14px;
height: 14px;
border-color: #73a7f0;
border-width: 1px;
border-style: none none solid solid;
background-color: #fff;
box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
演示
说明：
和其他例子一样，我有正常的带有边框的div。 尾部是CSS的简单组合：