gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:05:08 25 4
gpt4 key购买 nike

<分区>

我正在尝试使用白色背景颜色和 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 宽的边框。即使看起来与其他问题相似,它也不是其他问题(对话泡泡)的重复。再次强调,细节对于实现如此时尚的外观非常重要。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com