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

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. 杭电-------2098 分拆素数和(c语言写)

    #include<stdio.h> #include<math.h> ] = { , }; ;//全局变量,用来标志此时已有多少个素数 int judge(int n) {// ...

  2. git rm -r --cached解决已提交的文件在.gitignore中加入忽略后无效的问题。

    有时候,发现有不该提交的文件已经提交后,仅仅在.gitignore中加入忽略是不行的.这个时候需要执行: git rm -r --cached 文件/文件夹名字 去掉已经托管的文件,然后重新提交: g ...

  3. node准备

    === 原生的api === express express  中间件相关的. https://juejin.im/post/5aa345116fb9a028e52d7217 推荐几篇入门的优质博客: ...

  4. android手机拍照旋转的问题

    android开发中,遇到过手机拍照,明明是竖着拍的,显示的结果却是横这的,困扰了很久,找了很久找了一种解决方法: ExifInterface exifInterface = new ExifInte ...

  5. Hexo | 超详细的hexo+githhub page搭建过程

    首先安装node.js 安装git 去Git官网根据你的电脑参数,下载对应版本. 下载完成,通过在命令行输入 git version 查看是否安装成功,有输出版本号说明安装成功. 鼠标邮件菜单里就多了 ...

  6. PPT导出为图片

    使用Aspose组件导出 Aspose有Aspose.Slides.dll,可以无需安装office,进行读写PPT文件. Aspose可能通过Aspose.Slides.NET安装 简单的导出图片d ...

  7. SecureCRT的下载、安装（ 过程非常详细！！值得查看）

    SecureCRT的下载.安装( 过程非常详细!!值得查看) 简单介绍下SecureCRT 一.SecureCRT的下载 二.SecureCRT的安装 简单介绍下SecureCRT SecureCRT ...

  8. 静态存储SRAM设计

    SRAM即静态随机存取存储器.它是具有静止存取功能的内存,不需要刷新电路便能保存它内部存储的数据.在工业与科学用的很多子系统,汽车电子等等都用到了SRAM.现代设备中很多都嵌入了几千字节的SRAM.实 ...

  9. Arduino 制作截图区域

  10. 剑指offer-面试题59_1-滑动窗口的最大值-数组

    /* 题目: 链接:https://www.nowcoder.com/questionTerminal/1624bc35a45c42c0bc17d17fa0cba788 来源:牛客网 给定一个数组和滑 ...