css实现聊天气泡效果
---------------------------------------
css功能强大，能实现很多炫
酷的效果，今天给大家分享
用css3绘制聊天气泡的方法：
---------------------------------------
在绘制气泡之前，先实现箭
头的绘制，代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>arrow</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 #box{
12 width:0;
13 height:0;
14 border-top:30px solid black;
15 border-left:30px solid green;
16 border-right:30px solid red;
17 border-bottom:30px solid blue;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="box"></div>
23 </body>
24 </html>
效果如上图所示；
-----------------------------------------
从上面的图可以发现，在未设
置宽高的情况下，上下左右的
边框都是一个三角形，如果只
留下某一个方向上的border，
就可以实现三角箭头的效果；
实现css代码和效果如下：
----------------------------------------
1 #box{
2 width:0;
3 height:0;
4 border-top:30px solid black;
5 border-left:30px solid transparent;
6 border-right:30px solid transparent;
7 border-bottom:30px solid transparent;
8 }
-----------------------------------------
通过上面的箭头，我们就可以
绘制出一个聊天气泡了，代码
如下：
------------------------------------------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>arrow</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 #box{
12 position: relative;
13 top:100px;
14 left:100px;
15 width: 140px;
16 height: 100px;
17 background: #088cb7;
18 -moz-border-radius: 12px;
19 -webkit-border-radius: 12px;
20 border-radius: 12px;
21 }
22 #box:before{
23 position: absolute;
24 content: "";
25 width: 0;
26 height: 0;
27 right: 100%;
28 top: 38px;
29 border-top: 13px solid transparent;
30 border-right: 26px solid #088cb7;
31 border-bottom: 13px solid transparent;
32 }
33 </style>
34 </head>
35 <body>
36 <div id="box"></div>
37 </body>
38 </html>
效果如上图所示：
------------------------------------
感谢大家的阅读；
css实现聊天气泡效果的更多相关文章
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- 【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...
- 巧用border特性实现聊天气泡效果
利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...
- css3实现气泡效果的聊天框
因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- Unity UGUI图文混排源码(四) -- 聊天气泡
这里有同学建议在做聊天气泡时,可以更改为一张图集对应多个Text,这样能节省资源,不过我突然想到每个Text一个图集,可以随时更换图集,这样表情图更丰富一些,于是我就先将现有的聊天demo改为了聊天气 ...
- C#绘制三角形并填充，使用winform实现qq聊天气泡
首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
- Android 点九图机制讲解及在聊天气泡中的应用
点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...
随机推荐
- windows系统端口占用
这几天win服务器几个服务总是停止运行,查询原因是端口被占用,解决方法 在dos窗口中使用以下命令 netstat -a 显示所有连接和监听端口 netstat -b 显示包含于创建 ...
- [MacOS]MacOS字体文件位置
$ cd /System/Library/Fonts $ ls Apple Braille Outline 6 Dot.ttf Noteworthy.ttc SFCompactText-Regular ...
- C++常见编程--获取当前系统时间
C++常见编程--获取当前系统时间 文章首发https://www.cppentry.com 本文主要使用time() 及strftime() 函数 C++系统和时间相关的函数基本上都是使用C语言提供 ...
- toj 4353 Estimation(树状数组+二分查找)
Estimation 时间限制(普通/Java):5000MS/15000MS 运行内存限制:65536KByte总提交: 6 测试通过: 1 描述 “There are ...
- jSon和Ajax登录功能，ajax数据交互案例
ajax实例,检测用户与注册 检测用户名是否被占用: 在用户填写完用户名之后,ajax会异步向服务器发送请求,判断用户名是否存在 首先写好静态页面: index.html <!DOCTYPE h ...
- 如何在IDEA的maven项目中连接并使用MySQL8.0
首先看一下我的基本的开发环境: 操作系统:MacOS 10.13.5 编辑器:IDEA 2018.3 其他:MySQL8.0.15.Maven 3.3.9.JDK 1.8 好,下面就正式开始: 第一步 ...
- JAVA系统架构高并发解决方案 分布式缓存 分布式事务解决方案
JAVA系统架构高并发解决方案 分布式缓存 分布式事务解决方案
- Django 表关系的创建
Django 表关系的创建 我们知道,表关系分为一对多,多对多,一对一 我们以一个图书管理系统为背景,设计了下述四张表,让我们来找一找它们之间的关系 Book与Publish表 找关系:一对多 左表( ...
- postgresql 文件布局
我们知道linux中一个思想:一切皆文件,那么在我们安装完postgresql数据库后,她长什么样呢?本文带着你一起揭开她的面纱,看看postgresql的文件布局. 说明:由于安装测试的版本是10. ...
- SWIG 3 中文手册——10. 参数处理
目录 10 参数处理 10.1 typemaps.i 库 10.1.1 引言 10.1.2 输入参数 10.1.3 输出参数 10.1.4 输入 / 输出参数 10.1.5 使用不同的名称 10.2 ...