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

我正在尝试有一个CSS工具提示，背景颜色为白色，边框为1px如何使用边框而不是纯黑色箭头？

。向上箭头{
显示：内联块；
位置：相对位置；
边框：1px实心#777777；
文字装饰：无；
边界半径：2px；
填充：20px；
}
.向上箭头：之后{
内容：''；
显示：块；
位置：绝对位置；
左：140像素；
底部：100%；
宽度：0；
身高：0；
边框底部：10px纯黑；
边框顶部：10px实心透明；
左边框：10px实心透明；
右边框：10px实心透明；
}

---

带有向上箭头的

按钮

解决方案之一是添加另一个伪元素

:before

，该伪元素略小于

:before

。这不是有史以来最好的解决方案，但它在特定情况下工作得非常好

（您可能会注意到，我也对您的代码进行了一些清理，并将

：after

替换为

：before

，以便为这两个伪元素提供适当的z索引。如果需要进一步解释，请告诉我）

。向上箭头{
显示：内联块；
位置：相对位置；
边框：1px实心#777777；
文字装饰：无；
边界半径：2px；
填充：20px；
边缘顶部：50px；
}
.向上箭头：之前{
内容：''；
显示：块；
位置：绝对位置；
左：140像素；
底部：100%；
宽度：0；
身高：0；
边框：10px实心透明；
边框底色：黑色；
}
.向上箭头：之后{
内容：''；
显示：块；
位置：绝对位置；
左：141px；
底部：100%；
宽度：0；
身高：0；
边框：9px实心透明；
边框底色：白色；
}

---

带向上箭头的按钮

@jbutler483:这是一个近似的问题，但显然不是重复的问题。我的答案包括在这些工具提示中添加边框。如果您觉得您的问题不是，请编辑您的问题以清楚地澄清差异。这是一个dupe@Basj。结果是完全一样的，你只是把箭头放在不同的位置…@Basj它是重复的，因为它是完全相同的形状，只是位置不同而已。dupe中的一个（存在时间较长且有更多的向上投票）只有一个双边框（简单的css更改）和一个灰色背景（另一个简单的css更改）。虽然下面的答案可能是完美的，但如果你花了2分钟尝试使用被骗的答案，你会得到完全相同的结果。-这是从链接的示例代码中提取的，通过最小的更改显示，使其从上到下指向？您需要在我的高DPI屏幕上执行以下操作，以更正三角形和长方体之间的1/2像素细线：

。向上箭头：在{bottom:calc（100%-0.5px）；}之后

这也使得三角形周围的边框宽度与长方体周围1px边框的厚度相同。