css实现微信信息背景qq聊天气泡
用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颜色位置和定位即可实现)
css实现微信信息背景qq聊天气泡的更多相关文章
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
- QQ聊天气泡(图片拉伸不变样)、内容尺寸定制(高度随字数、字体而变)
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...
- C#绘制三角形并填充,使用winform实现qq聊天气泡
首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...
- 【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...
- JAVA实现QQ聊天气泡
最近做了聊天气泡功能,为自己的聊天室美化了一下聊天效果: 先来看一下效果: 主要的思路是:以一个JTextPane作为显示的面板,然后自定义一个组件JBubble气泡组件来实现他的聊天气泡,然后通过J ...
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...
- reactnative实现qq聊天消息气泡拖拽消失效果
前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
- Android 点九图机制讲解及在聊天气泡中的应用
点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...
随机推荐
- extjs 一些杂碎的技术问题
1怎样将grid 的checkedbox 勾选状态都清除 inv.getSelectionModel().clearSelections(); inv.getView().refresh(); 2怎样 ...
- 利用javascript实现课程选择
最终实现的效果如下图所示: 代码如下所示: HTML代码部分: <body> <div class="page" style="overflow: hi ...
- javaScript实现修改输入框之后标红
<html> <title>实现标红</title> <script type="text/javascript"> functi ...
- LA 5135 井下矿工
题目链接:http://vjudge.net/contest/141787#problem/B 白书P318 题目大意:有N个矿井 ,由一些隧道连接起来,现在要修建尽量少的安全通道,使得无论哪里发生事 ...
- (2) 深入理解Java Class文件格式(一)
好文转载:http://blog.csdn.net/zhangjg_blog/article/details/21486985 Class文件在Java体系结构中的位置和作用 在上一篇博客中, 大致讲 ...
- Hadoop集群环境搭建
----------------------------------------------------------- 自学记录,交流学习请发送邮件至gxz1984@gmail.com ------- ...
- 移植linux-2.6.32.2到qq2440
编译该版本内核使用的编译器版本:arm-linux-gcc 3.4.1 1.获取linux-2.6.32.2 2.解压内核 3.切换到刚解压的内核目录下: cd linux-2.6.32.2 4.修改 ...
- ios下移除原生样式
之前遇到过这个问题,今天无意中在网上看见博文 记录一下. 设置这个就好: -webkit-appearance : none ;
- 连接mysql提示com.mchange.v2.resourcepool.BasicResourcePool
1.com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@6ff9129c com.mchange.v2.resourc ...
- Point ZM 转换为Point 类型
打开ArcToolbox,使用ConvertionTools-> To Shapefile->FeatureClass to Shapefile 工具,注意在环境设置里,里将output ...