css实现微信信息背景qq聊天气泡
2024-04-11 02:36:05
用css实现一个椭圆形状的背景框很好实现
css:
div{
width:200px;
height:80px;
background-color: #78DDF8;
border-radius:10px;
}
html:
<div></div>
重点在于边上的小三角，这里用到css的伪类 ：before （：after/:first-letter/:first-line都是）
div::before{
content:'';
display:'block';
border:20px solid red;
left:-20px;
top:5px;
position:absolute;
z-index:-1;
border-radius:5px;
border-color:#78DDF8 transparent transparent transparent;
}
这样qq的气泡指向的背景框就实现了（可复制粘帖查看，这里就不配图了）
div::before{
content:'';
display:'block';
border:14px solid red;
left:-28px;
top:26px;
position:absolute;
z-index:-;
border-color:transparent #78DDF8 transparent transparent ;
}
这是微信对方信息背景框。（如果实现本人的信息框，将before改成after，并修改boder-color颜色位置和定位即可实现）
最新文章
- awk 高级技巧
- 《精通C#》委托与事件（10章）
- BZOJ 1668 馅饼里的财富
- CentOS7 Nexus安装
- 巧用translate设置元素垂直水平居中
- Android自定义单选，自定义选中状态
- memcached简介(转)
- 轻松学习Linux之理解Shell的硬链接与软连接
- local storage 简单应用‘’记住密码’
- net Core 通过 Ef Core 访问、管理Mysql
- （转载）浅谈javascript的分号
- phpmailer邮件类下载(转)
- Maven插件之buildnumber-maven-plugin
- struts2.0中struts.xml配置文件详解
- css 居中，中央
- Java导出freemarker实现下载word文档格式功能
- 超级简单！把文档转换成网页格式(Core)
- JAVA spring 常用包作用详解（转）
- Docker 入门指南——资源工具篇
- Django知识点梳理