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

其中一个解决方案是添加另一个伪元素class A { protected: int number; private: int size; public: Randomfunction(); } void B::Itemfunction() { number = 2; }，它略小于:before。它不是最好的解决方案，但它对特定情况非常适用。

（您可能会注意到我已经清理了一些代码并将:after替换为:after以获得两个伪元素的正确z-index。如果您需要进一步说明，请告诉我。）

:before

.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;
}

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

1 个答案: