css 三角形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <div class = "business-div" > <span>数据不一致</span> <div class = "div-hover" > <div class = "label-dev" >描述:<span>xxxxxxxxxxxxx</span> </div> </div> </div> .business-div{ position: absolute; margin-top: -10px; cursor: pointer; } .div-hover{ display: block; background: #E6EBF2; top: 27px; left: -17px; position: absolute; width: 205px; padding: 10px; border: 1px solid #99AFCA; border-radius: 5px; z-index: 99; } .business-div:hover .div-hover{ display: block; background: #E6EBF2; top: 27px; left: -17px; position: absolute; width: 205px; padding: 10px; border: 1px solid #99AFCA; border-radius: 5px; z-index: 99; } .div-hover:before{ content: "" ; position: absolute; top: -10px; left: 40px; border-bottom: 10px solid #99AFCA; border-left: 10px solid transparent; border-right: 10px solid transparent; } .div-hover:after{ content: "" ; position: absolute; top: -9px; left: 40px; border-bottom: 10px solid #E6EBF2; border-left: 10px solid transparent; border-right: 10px solid transparent; } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通