我怎样才能创build一个“工具提示尾巴”使用纯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/demohttp://img.dovov.comcoda/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>
这会创build一个小小的箭头/三angular形效果，即“工具提示尾巴”。 这打击了我的脑海！ 我真的很想知道这是如何工作的！
此外，有没有办法扩展这个CSS技巧来创build一个效果如下：
这是一个有趣的问题。 可以这样做只使用CSS，现在忽略阴影？
更新1
我想出了一个解决我最初的问题。 这是小提琴
http://jsfiddle.net/duZAx/7/
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
下面的答案组合后，我的解决scheme。 我没有在多个浏览器上进行testing，但在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; }
这是一个盒子阴影的例子，所有最新版本的浏览器都应该支持这个
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留给其他人，因为我很懒，请给他们答案，你认为值得投票！）：
这会创build一个小小的箭头/三angular形效果，即“工具提示尾巴”。 这打击了我的脑海！ 我真的很想知道这是如何工作的！
-
当渲染具有不同边缘颜色但具有相同样式（在您的情况下为
solid）的边框时，将每对相邻边angular分开的接缝是一条对angular线。 这与图中所示的groove，ridge，inset和outset边框样式非常相似。请注意，虽然所有浏览器的行为都是一样的，只要我记得，但是这种行为在CSS2.1规范或CSS Backgrounds and Borders模块中没有完全定义。 后者有一个描述angular落的颜色和样式转换的部分，描述似乎暗示对于零angular半径的边界来说，渲染的线实际上是一条将填充边的angular与angular（对等宽边界产生45度angular线），但规范仍然警告说，这可能并不总是这种情况（特别是因为它甚至没有明确地考虑到具有零angular半径的边界）。 1
-
通过内容（原始的W3C）盒子模型 ，在20个像素的边框中创build40×40的区域，其内容尺寸被定义为0x0。
-
将一个正方形与连接其四个angular的对angular线相除会得到四个直angular在正方形中点处相交的直angular三angular形（见下文）。
-
顶部，底部和左侧的边框是白色的，与
.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的一个简单的组合：
- 我使用伪select器：之前（：工作正常后）
- 我用白色空间强制内容使尾部可见。
- 我从45deg旋转我的箱子，修复工具提示一侧的angular落
- 对大小和定位没有意外。
- 我想在两边添加一个边框。
- 最后，我将阴影添加到外部边界。
工具提示没有阴影
.abubble { position: relative; border: 1px solid #a0c7ff; width: 100px; height: 100px; } .ashadow { position: absolute; display: inline-block; background: transparent; width: 10px; height: 10px; left: 50px; top: 100px; -moz-box-shadow: 0px 10px 30px #000; -webkit-box-shadow: 0px 10px 30px #000; box-shadow: 0px 10px 30px #000; } .atail { position: absolute; display: inline-block; border-width: 20px; border-style: solid; border-color: #a0c7ff transparent transparent transparent; width: 0px; height: 0px; left: 30px; top: 100px; } .atail2 { position: relative; display: inline-block; border-width: 19px; border-style: solid; border-color: #fff transparent transparent transparent; width: 0px; height: 0px; left: -19px; top: -20px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demohttp://img.dovov.comcoda/bubble-tail2.png); display: block; height: 29px; width: 30px; }
<div>How do I get this effect with only CSS? <br /> <div class="anothertail"></div> </div> <div class="abubble"> <div class="atail"> <div class="atail2"> </div> </div> </div>
Crossbrowser方法：
.tooltip { position:relative; padding:10px; border-bottom:1px solid #000; background:#ccc; } .arrow { background:transparent; display:inline-block; position:absolute; bottom:-20px; border-left:10px solid transparent; border-bottom:10px solid transparent; border-top:10px solid #000; border-right:10px solid transparent; } .arrow i { display:inline-block; position:absolute; top:-10px; left:-9px; width:0; height:0; border-left:9px solid transparent; border-bottom:9px solid transparent; border-top:9px solid #ccc; border-right:9px solid transparent; } * html .arrow { border-bottom-color:white; border-left-color:white; border-right-color:white; filter: chroma(color=white); } * html .arrow i { border-bottom-color:white; border-left-color:white; border-right-color:white; filter: chroma(color=white); }
<div class="tooltip"> <span class="arrow"><i></i></span> Tooltip text that wants to be your friend. </div>
你可以使用：之前和之后：CSS的伪元素。 例如：之前可以用来插入一个三angular形和：之后插入一个矩形。 这两者的结合创build了一个气泡工具提示
例如：
a[bubbletooltip]:before { content: ""; position: absolute; border-bottom: 21px solid #e0afe0; border-left: 21px solid transparent; border-right: 21px solid transparent; visibility: hidden; bottom: -20px; left: -12px; } a[bubbletooltip]:after { position: absolute; content: attr(bubbletooltip); color: #FFF; font-weight:bold; bottom: -35px; left: -26px; white-space: nowrap; background: #e0afe0; padding: 5px 10px; -moz-border-radius: 6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius: 6px; visibility: hidden; }
在线工具可在http://www.careerbless.com/services/css/csstooltipcreator.php上find
