css实现带边框的冒泡提示框
需求是实现这种效果,
因为内容是动态的,使用图片不是很好:
原因:
如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理了。
所以尝试用css画效果,
完成后的效果图
实现原理就是,图像拼接,
主体一部分,右边那个角是一部分,然后主体需要一个容器遮挡住右边多余部分,
示意图:
上代码:
.panle-item-tags {
z-index: 100;
width: 100px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
// left: -140px;
left: 40px;
font-size: 16px;
color: #fff;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
background: rgba(156, 255, 55, 1);
border: 2px solid rgba(119, 215, 20, 1);
border-radius: 4px;
&::before {
content: '';
position: absolute;
right: -7px;
bottom: 10px;
background: rgba(156, 255, 55, 1);
border: 2px solid rgba(119, 215, 20, 1);
width: 16px;
height: 16px;
border-radius: 4px;
transform: rotate(45deg);
z-index: 1;
}
&::after {
content: '';
position: absolute;
top 2px;
left 2px;
right 0px;
bottom 2px;
background: rgba(156, 255, 55, 1);
border-radius: 4px;
z-index: 2;
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用