今天自己用 HTML/CSS 做了个类似QQ的聊天气泡，以下是效果图：

以下说下关键地方的样式设置。然后贴出html和css代码（不多）。


步骤1：布局
消息採用div+float布局，每条消息用一个DIV标签包裹，里面再放两个DIV分别用来包裹用户图标和用户消息内容。
左側消息，先清除浮动，然后设置 float：left。这样用户图标和消息内容就能够显示在同一行了，当中用户图标在左边，消息内容紧邻着用户图标。

右側消息，相同先清除浮动。然后设置 float:right，这样用户图标和消息显示在同一行了。当中图标在最右边。图标左側是消息。

步骤2：设置圆角矩形
border-radius:7px;

步骤3：三角形箭头

将DIV的宽度和高度设置为0，设置边框宽度，能够使其表现出一个由四个三角形组成的矩形，每一个三角形的颜色和大小能够通过设置border宽度和颜色设置。

这里将当中三个三角形颜色设置为透明。仅仅留下一个三角形可见。

    .triangle{

        width: 0px;

        height: 0px;

        border-width: 15px;

        border-style: solid;

        border-color: red blue green gold;

    }

    .triangle{

        width: 0px;

        height: 0px;

        border-width: 15px;

        border-style: solid;

        border-color: transparent transparent transparent red;

    }

关键点4：三角形尾随矩形框
使用相对定位。能够使三角形始终固定在矩形框的边上。

position:relative;

所有代码：
<html>

<head>

<style>

  /* bubble style */

        .sender{

            clear:both;

        }

        .sender div:nth-of-type(1){

            float: left;

        }

        .sender div:nth-of-type(2){

            background-color: aquamarine;

            float: left;

            margin: 0 20px 10px 15px;

            padding: 10px 10px 10px 0px;

            border-radius:7px;

        }

        .receiver div:first-child img,

        .sender div:first-child img{

            width:50px;

            height: 50px;

        }

        .receiver{

            clear:both;

        }

        .receiver div:nth-child(1){

            float: right;

        }

        .receiver div:nth-of-type(2){

            float:right;

            background-color: gold;

            margin: 0 10px 10px 20px;

            padding: 10px 0px 10px 10px;

            border-radius:7px;

        }

        .left_triangle{

            height:0px;

            width:0px;

            border-width:8px;

            border-style:solid;

            border-color:transparent aquamarine transparent transparent;

            position: relative;

            left:-16px;

            top:3px;

        }

        .right_triangle{

            height:0px;

            width:0px;

            border-width:8px;

            border-style:solid;

            border-color:transparent transparent transparent gold;

            position: relative;

            right:-16px;

            top:3px;

        }

  </style>

</head>

<body>

<!-- Left -->

<div class="sender">

      <div>

          <img src="chatTemplateExample2_files/cat.jpg">

      </div>

  <div>

      <div class="left_triangle"></div>

      <span> hello, man! </span>

   </div>

  </div>

<!-- Right -->

  <div class="receiver">

      <div>

          <img src="chatTemplateExample2_files/cat.jpg">

      </div>

   <div>

        <div class="right_triangle"></div>

        <span> hello world </span>

   </div>

  </div>

</body>

</html>













【HTML5】实现QQ聊天气泡效果的更多相关文章

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

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

  2. QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）

    - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...

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

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

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

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

  5. JAVA实现QQ聊天气泡

    最近做了聊天气泡功能,为自己的聊天室美化了一下聊天效果: 先来看一下效果: 主要的思路是:以一个JTextPane作为显示的面板,然后自定义一个组件JBubble气泡组件来实现他的聊天气泡,然后通过J ...

  6. css实现聊天气泡效果

      --------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...

  7. css实现微信信息背景qq聊天气泡

    用css实现一个椭圆形状的背景框很好实现 css: div{ width:200px; height:80px; background-color: #78DDF8; border-radius:10 ...

  8. html5 实现qq聊天的气泡效果

    教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...

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

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

随机推荐

  1. DMA

    DMA:如果将一串字符串通过串口传送到外设中去,用传统的方法,则CPU将不断的去扫描UTSTAT这个寄存器,在字符发送期间,CPU将不能做任何其他事情.为了解决这个问题,则在诞生了DMA CPU只需要 ...

  2. Markdown的简介（转）

    欢迎使用 Cmd - 在线 Markdown 编辑阅读器 *我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人, Cmd Markdown 是我们给出的答案 -- ...

  3. PHP大型电商网站秒杀思路

    秒杀/抢购 技术:高可用,高并发 市场:用户体验,曝光度,促销 秒杀放单独服务器,这样即使崩溃不影响网站其他功能. 高可用:双活. 高并发:负载均衡,安全过滤. 阿里云:云监控 分流,CDN加速 业务 ...

  4. android OOM 内存溢出

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 一个应用的可用内存是有限的,如果超过了可用的内存,就会内存溢出. 1,避免 已经不用的对 ...

  5. SQLSERVER2014集群实战——DNS的坑

    近几日生产环境总是偶发的出现数据库连接失败的错误,一开始并未引起重视,因为反馈的人很少,而且应用服务器与数据库服务器都处在同一机房的内网环境,相互之间的访问应该是很稳定的.直到早上有几分钟的时间里出现 ...

  6. 【搜索+DP】codevs1066-引水入城

    [题目大意] 一个N行M列的矩形,如上图所示,其中每个格子都代表一座城 市,每座城市都有一个海拔高度.现在要在某些城市建造水利设施.水利设施有两种,分别为蓄水厂和输水站.蓄水厂的功能是利用水泵将湖泊中 ...

  7. 周末 “CTO训练营”

    今天下午去中关村参加了51cto高招 “CTO训练营”  第一期. 呃蛮有收获,聊技术发展,技术cto线路或对应发展,人事对应cto发展,投资人对应看法,51cto老总的看法. 呃,挺有意思,同样认识 ...

  8. 慎用 new、delete

    C++ STL 为我们提供了一套容器.在多数情况下,这套容器已足够让我们使用.所以,需要我们自己去用 new/new []/delete/delete [] 来管理内存的必要性并不是很大.此外,自己管 ...

  9. [POJ1082]Calendar Game

    题目大意: 日历上博弈,从给定的日期,按照下述规则跳转日期: 1.跳到第二天: 2.调到下个月相同的日期(如果没有就不能跳转). 刚刚好跳到2001年11月4日的人胜,跳转时不能跳到2001年11月4 ...

  10. hdu 4745 区间dp

    题意:求一个环的最长回文序列,是序列不是串 链接:点我 起点是可以任意的, 所以只要求出每个区间的最长回文序列之后取max(dp[1][i]+dp[i+1][n]),即可得最终答案 本来是想扩展两倍的 ...