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

Question

我正在尝试 CSS 工具提示，背景颜色为白色，边框为 1 像素。 如何用边框代替普通的黑色箭头？

.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

其中一个解决方案是添加另一个比 :after 稍小的伪元素 :before。这不是有史以来最好的解决方案，但它在特定情况下工作得很好。

（您可能会注意到我还稍微清理了您的代码并将 :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>

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

CSS tooltip with arrow and border

css

tooltip

css-shapes