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