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

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. 杭电-------2046骨牌铺方格（C语言写）

    #include<stdio.h> ] = { }; long long recrusion(int n) { || a[n]>) { return a[n]; } ) + recr ...

  2. Python 实现转堆排序算法原理及时间复杂度（多图解释）

    原创文章出自公众号:「码农富哥」,欢迎转载和关注,如转载请注明出处! 堆基本概念 堆排序是一个很重要的排序算法,它是高效率的排序算法,复杂度是O(nlogn),堆排序不仅是面试进场考的重点,而且在很多 ...

  3. junit测试的介绍和应用

    目录 1.junit测试简介 2.运行环境 3.测试过程 1.junit测试简介 JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于Kent ...

  4. JS循环解决任意日期间的间隔天数

    用JS循环解决任意日期间的间隔天数,并求截止日期是周几 y1=1900 m1=1 d1=1 y2=2000 m2=5 d2=3 days=0 ydays=0 mdays=0 ddays=d2-d1 f ...

  5. nginx 正向代理与反向代理

    一.介绍 反向代理:让Internet上的用户可以访问局域网内的资源,中间设置一个代理服务器,如下所示,红色圈是指局域网内的站点(myweb站点是我们的站点,例如iis).箭头不能反过来 正向代理:客 ...

  6. ACM 英文学习系列

    因为ACM题目描述全是英文,所以有必要学习学习相关词汇...内心极为无奈 废话不多说 rooted binary tree 有根二叉树     integers n 英[ˈɪntɪdʒəz] 整数   ...

  7. C#面向对象--结构

    一.结构(Struct)是CTS中五种基本类型之一,是一种值类型,同样封装了同属一个逻辑单元的数据和行为,这些数据和行为通过结构中的成员表示:结构与类共享大多数相同的语法,但结构比类受到的限制更多,结 ...

  8. RestTemplate + okhttp 实现远程调用

    1. 添加依赖 <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp --> <dependency ...

  9. MySQL必知存储引擎

    Mysql存储引擎 1.MyISAM MySQL 5.0 之前的默认数据库引擎,最为常用.拥有较高的插入,查询速度,但不支持事务. 2.InnoDB事务型数据库的首选引擎,支持ACID事务,支持行级锁 ...

  10. 出现ImportError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly ....的解决方法

    在terminal上运行gluoncv时遇到了一个报错问题. ImportError: Python is not installed as a framework. The Mac OS X bac ...