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

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. 浅谈.NET中AppDomain的理解

    一.走进.NET AppDomain 天哪,.NET Framwork的CLR真是巧妙呢!随着越来越多的对.Net底层编程的了解,一些诸如架构,处理过程的复杂难懂的细节完全的让我叹服,所以呢,再次错过 ...

  2. generator 和 co模块

    // 类数组的生成器 // 类数组的生成器 function fns() { let obj = {0:1,1:2,2:3,length: 3}, [Symbol.iterator]: functio ...

  3. MySQL 数据库的提速器-写缓存（Change Buffer）

    写缓存(Change Buffer) 是一种特殊的数据结构,用于在对数据变更时,如果数据所在的数据页没有在 buffer pool 中的话,在不影响数据一致性的前提下,InnoDB 引擎会将对数据的操 ...

  4. npm/gulp/nodejs

    npm淘宝镜像:https://npm.taobao.org/ vscode先安装npm淘宝镜像 再安装gulp:https://www.cnblogs.com/xiaoleiel/p/1116056 ...

  5. RedHat7安装NetCore环境并发布网站

    RedHat7安装NetCore环境并发布网站 1.注册Microsoft签名密钥并添加Microsoft产品提要,每台机器只需注册一次 执行下面的命令即可 rpm -Uvh https://pack ...

  6. js函数与作用域,了解函数基本概念

    通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制包含条件判断if,switch选择;循环for while:下面js的函数及作用域,学 ...

  7. Android Binder实现浅析-Binder驱动

    简介 Android是如何实现跨进程通信的,大家熟悉的Binder是什么,怎么设计的,进程间的数据如何发送接收的.本文将以及解析,并对Binder驱动实现.Native层实现.Java层实现三块做一个 ...

  8. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  9. rsa special

    [ReSnAd] -- iqmp ipmq e,c,\(\phi(n)\) 题目: class Key: PRIVATE_INFO = ['P', 'Q', 'D', 'DmP1', 'DmQ1'] ...

  10. UTF-8(bom-non)

    Public Sub WriteUTF_8BomNon(ByVal fileName As String, ByVal strLine As String) Dim stream: Set strea ...