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

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. win10双击执行python

    一. 设置py环境 去官网下载Windows x86-64 executable installer安装 安装后会自动配置py的bin路径和pip的路径 Pip用于安装python库的 二. 设置wi ...

  2. phpmyadmin配置文件详解

    PHPMyadmin配置文件config.inc.php或config.default.php内容及作用解析大致如下: /** * phpMyAdmin Configuration File * * ...

  3. React之JSX的语法细节

    带注释 import React, { Component, Fragment } from 'react' import './style.css' class TodoList extends C ...

  4. C#设计模式学习笔记：(9)组合模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第四个模式--组 ...

  5. Chrome的插件扩展程序安装目录

    地址栏输入chrome:version回车 个人资料路径下的Extensions文件夹即默认的扩展安装路径

  6. Linux基础：df命令总结

    本文只总结一些常用的用法,更详细的说明见man df和 df --help. df命令 df命令用于显示目前在Linux系统上的文件系统的磁盘使用情况统计. df命令主要是从各文件系统的Super b ...

  7. IDAE快捷键与设置

    以前做项目的时候都是用Eclispe,来到新的公司发现IDE用的是IDEA集成开发工具,以前也用过IDEA,只是略懂略懂,以后你会发现,当你用IDEA的快捷键的时候,会6的飞起 1.IDEA常用快捷键 ...

  8. rsa special

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

  9. ArcGIS Runtime SDK for Android 加载shp数据，中文乱码问题

    针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 现有一个图层名称为“图层.shp”,以此为例: 1.拷贝一个cpg文件,修改名称为“图层.cpg”,并用文本打开cpg文件修改编码为“ ...

  10. 使用高精度计算斐波那契数列 c++

    使用高精度计算斐波那契数列 非高精度 Code(Non-high accuracy) 这是不用高精度的代码 #include<bits/stdc++.h> using namespace ...