带有箭头和边框的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>