纯css三角形 带边框

如图所示：
这里写图片描述

HTML：

<p class="tooltip">定义：连接设备的用户数<br>当前：正在连接设备的用户数<br>今日：到最近整点时间连接设备的用户数<br>昨日：昨天24小时内所有连接设备的用户数<br>最高：在历史记录中，展示连接设备用户数<br>最高值及发生日期</p>

CSS：

.tooltip{position:absolute;bottom:-148px;right:0;background-color:#fff;border:1px solid #ddd;border-radius:5px;z-index:2;font-size:12px;line-height:20px;padding:10px;display: none;}
.tooltip:before {box-sizing:content-box;width:0px;height:0px;position:absolute;top:-12px;right:10px;padding:0;border-bottom:6px solid #FFFFFF;border-top:6px solid transparent;border-left:6px solid transparent;border-right:6px solid transparent;display:block;content:'';z-index:12;}
.tooltip:after {box-sizing:content-box;width:0px;height:0px;position:absolute;top:-14px;right:9px;padding:0;border-bottom:7px solid #cccccc;border-top:7px solid transparent;border-left:7px solid transparent;border-right:7px solid transparent;display:block;content:'';z-index:10}
posted @ 2022-07-20 18:17  猫老板的豆  阅读(181)  评论(0)  编辑  收藏  举报