---------------------------------------

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实现聊天气泡效果的更多相关文章

  1. HTML5实现微信聊天气泡效果

    最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...

  2. 【HTML5】实现QQ聊天气泡效果

    今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...

  3. 巧用border特性实现聊天气泡效果

    利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...

  4. css3实现气泡效果的聊天框

    因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...

  5. 使用纯 CSS 实现超酷炫的粘性气泡效果

    最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...

  6. Unity UGUI图文混排源码(四) -- 聊天气泡

    这里有同学建议在做聊天气泡时,可以更改为一张图集对应多个Text,这样能节省资源,不过我突然想到每个Text一个图集,可以随时更换图集,这样表情图更丰富一些,于是我就先将现有的聊天demo改为了聊天气 ...

  7. C#绘制三角形并填充，使用winform实现qq聊天气泡

    首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...

  8. winform实现QQ聊天气泡200行代码

    c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...

  9. Android 点九图机制讲解及在聊天气泡中的应用

    点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...

随机推荐

  1. pymongo（看后转载，在原基础上添加了类连接和简单调用）

    一.MongoDB 数据库操作 1. 连接数据库 import pymongo conn = pymongo.Connection() # 连接本机数据库 # conn = pymongo.Conne ...

  2. Laravel + Serverless Framework 快速创建 CMS 内容管理系统

    今天,为大家带来一篇 Laravel + Serverless Framework 的综合实战,里面信息量有点多,大家仔细看哦- 首先,我来介绍下主要的本地环境吧: Git:不多说,只要会敲代码就应该 ...

  3. c++ bool

    bool 就两个值,真或者假,通常用来存储关系表达式或者逻辑表达式的结果. 以前是用 int 来表示真假,大 int 有多个值,所以才规定 0 为假,非零为真,导致对应关系比较麻烦,有了 bool 就 ...

  4. Linux文件结构-底层文件访问&文件目录和维护

    每个运行中的程序被称为进程(process),它有一些与之关联的文件描述符(一些小值整数).可以通过文件描述符访问打开的文件或设备. 一个程序运行时,一般会有三个文件描述符与之对应 0:标准输入 1: ...

  5. C# protobuf自动更新cs文件

    网上的教程大都是手动通过protoc编译, 比较难用 给当前工程添加"Google.Protobuf"和"Grpc.Tools"的引用(通过nuget), 然后 ...

  6. java设计模式学习笔记——里氏替换原则

    oo中的继承性的思考和说明 1.继承包含这样一层含义:父类中凡是已经实现好的方法,实际上是在设定规范和契约,虽然它不强制要求所有的子类必须遵循这些七月,但是如果子类对这些已经实现的方法任意修改,就会对 ...

  7. springboot 查看H2数据库

    1  再application.properties文件中,添加 spring.h2.console.enabled=true 2 再浏览器中打开: http://localhost:8080/h2- ...

  8. 小白的linux笔记4：几种共享文件方式的速度测试——SFTP(SSH)/FTP/SMB

    测试一下各个协议的速度,用一个7205M的centos的ISO文件上传下载.5Gwifi连接时,本地SSD(Y7000)对服务器的HDD: smb download 23M/s(资源管理器) smb ...

  9. 题解 Luogu P3370

    讲讲这题的几种做法: 暴力匹配法 rt,暴力匹配,即把字符串存起来一位一位判相等 时间复杂度$ O(n^2·m) $ 再看看数据范围 \(n\le10^5,m\le10^3\) 当场爆炸.当然有暴力分 ...

  10. MongoDB3.6版本新增特性

    MongoDB3.6版新特性如下: (1)Default Bind to Localhost 从3.6版本开始,在默认情况下,MongoDB二进制文件mongod和mongos绑定到localhost ...