带有箭头和边框的 CSS 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36872206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS tooltip with arrow and border
提问by Basj
I'm trying to have a CSS tooltip with white background color and 1px border. How to have a border instead of plain black arrow?
我正在尝试使用白色背景色和 1px 边框的 CSS 工具提示。如何有边框而不是纯黑色箭头？
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid black;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}<div href="#" class="up-arrow">Button with Up Arrow</div>PS: Even if it looks similar to another question, the details of design are very important. For example, there was originally here 3 different answers (now 2 of them deleted), slightly different in design. Even if very little different, their arrow look was a bit less perfect that the current perfect answer! The devil is in the detail!
The goal is here to have a plain white tooltip, with 1px wide border. Even if similar look to some other, it's not a duplicate of other question (speech bubble). Once again details are important to achieve such a sleek look.
PS：即使看起来和另一个问题很相似，设计的细节也很重要。例如，这里最初有 3 个不同的答案（现在删除了其中的 2 个），设计上略有不同。即使几乎没有什么不同，他们的箭头外观也没有当前的完美答案那么完美！魔鬼在细节！
我们的目标是拥有一个纯白色的工具提示，边框宽度为 1px。即使看起来与其他人相似，它也不是其他问题（讲话泡泡）的重复。再一次，细节对于实现如此时尚的外观很重要。
回答by Pawe?
One of the solutions would be adding another pseudo element :beforewhich is slightly smaller than :after. It's not the nicest solution ever, but it works perfectly fine for particular cases.
一种解决方案是添加另一个:before略小于:after. 这不是有史以来最好的解决方案，但它在特定情况下工作得非常好。
(You may notice that I've also cleaned up your code a little and replaced :afterwith :beforeto have proper z-index for both pseudo elements. Let me know if you need further explanation)
（您可能注意到，我也清理你的代码一点点和更换:after用:before有适当的z-index两个伪元素。让我知道如果你需要进一步的说明）
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}<div href="#" class="up-arrow">Button with Up Arrow</div>