添加箭头

发布时间 2023-04-07 13:44:18作者: 小孟快点跑哇

 

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。

以下实例演示了如何为显示在顶部的提示工具添加底部箭头:

顶部提示框/底部箭头:

.tooltip .tooltiptext::after {

content: " ";

position: absolute;

top: 100%; /* 提示工具底部 */

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: black transparent transparent transparent;

}

https://www.lekaowang.com/zhxfgcs/zxl/asz/