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

Question

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

18

我想要一个白色背景和1像素边框的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个），设计略有不同。即使非常微小的差异，它们的箭头外观也比当前完美的答案差一点！细节决定成败！
目标是拥有一个纯白色的工具提示，带有1像素宽的边框。即使看起来与其他某些工具提示类似，它也不是其他问题（话语气泡）的副本。再次强调，细节对于实现如此流畅的外观非常重要。

- Basj

@jbutler483：这是一个相似的问题，但显然不是重复的。 - Basj

1

我的答案涵盖了将边框添加到这些工具提示中。如果您觉得您的问题不是这样，请编辑您的问题以清楚地澄清差异。 - jbutler483

这是一个重复的 @Basj。结果完全相同，你只是把箭头放在不同的位置... - Stewartside

1

@Basj，它是一个重复的问题，因为它具有完全相同的形状，只是位置不同。在重复的那个问题中（该问题存在更长时间，并获得更多upvote），只是添加了双边框（简单的CSS更改）和灰色背景（另一个简单的CSS更改）。虽然下面的答案可能完美无缺，但如果您花费2分钟尝试使用重复的答案，您将会获得完全相同的结果。 - Stewartside

4

请将文本从英语翻译成中文。仅返回翻译后的文本：https://jsfiddle.net/Lyae1v0L/2/ - 此文本是从链接示例代码中提取的，进行了最少的修改。 - jbutler483

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł · Accepted Answer

解决方案之一是添加另一个伪元素: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>