纯css三角形带边框

最新推荐文章于 2023-08-21 14:47:29 发布

猫老板的豆

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量5.7k

点赞数 2

分类专栏： CSS 项目实例文章标签： css css3 纯css三角形

本文链接：https://blog.csdn.net/x550392236/article/details/76686055

版权

CSS 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

项目实例

31 篇文章 1 订阅

订阅专栏

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

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}