带有箭头和边框的CSS工具提示

Question

我正在尝试使用白色背景颜色和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:即使它看起来与另一个问题类似,设计的细节也非常重要.例如,这里最初有3个不同的答案(现在已删除其中2个),设计略有不同.即使差别很小,他们的箭头看起来也不如目前完美答案的完美!魔鬼在细节!
这里的目标是使用1px宽边框的纯白色工具提示.即使看起来与其他人相似,也不是其他问题(讲话泡泡)的重复.再一次细节对于实现如此光滑的外观非常重要.

Answer 1

其中一个解决方案是添加另一个:before稍微小于的伪元素:after.它不是最好的解决方案,但对于特定情况它可以完美地运行.

(您可能注意到,我也清理你的代码一点点和更换: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>