【发布时间】：2011-08-03 03:27:55
【问题描述】：
我刚刚发现了一个巧妙的 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>这会创建一个类似箭头/三角形的效果，即“工具提示尾巴”。这让我大吃一惊！ 我真的很想知道这是如何工作的？！
还有，有没有办法扩展这个 CSS 技巧来创建如下效果：
这是一个有趣的问题。这可以只使用 CSS 来完成，暂时忽略阴影吗？
更新 1
我找到了解决我最初问题的方法。这是小提琴......
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.tooltiptail2 {
display: block;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 18px;
width: 0px;
height: 0px;
position: relative;
left: 4px;
top: -38px;
}
现在，我如何使用纯 CSS 完全模仿上面的小图片，包括阴影并使其跨浏览器兼容？
更新 2
结合以下答案，这是我的解决方案。我没有在多个浏览器上测试过它，但它在 Chrome 中看起来很棒。
http://jsfiddle.net/UnsungHero97/MZXCj/688/
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
#toolTip {
background-color: #ffffff;
border: 1px solid #73a7f0;
width: 200px;
height: 100px;
margin-left: 32px;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px -1px black;
-moz-box-shadow: 0px 0px 8px -1px black;
-webkit-box-shadow: 0px 0px 8px -1px black;
}
#toolTip p {
padding:10px;
}
#tailShadow {
background-color: transparent;
width: 4px;
height: 4px;
position: absolute;
top: 16px;
left: -8px;
z-index: -10;
box-shadow: 0px 0px 8px 1px black;
-moz-box-shadow: 0px 0px 8px 1px black;
-webkit-box-shadow: 0px 0px 8px 1px black;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #73a7f0 transparent transparent;
position:absolute;
top: 8px;
left: -20px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -18px;
top: 8px;
}
【问题讨论】：
-
它必须在哪些浏览器中工作？
-
在这一点上我真的不在乎 :) 我只是想看看这是否可能！实际上，我会使用图片，但我对挑战很感兴趣
-
如果使用分层元素和像素完美的轮廓定位应该是可行的。有没有影子？
-
@Archimedix... 完全同意，但你能做到吗？
-
这太简单了，但又太棒了，好找 Hristo！
标签： css tooltip css-shapes