css实现聊天气泡效果
---------------------------------------
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实现聊天气泡效果的更多相关文章
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- 【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...
- 巧用border特性实现聊天气泡效果
利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...
- css3实现气泡效果的聊天框
因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- Unity UGUI图文混排源码(四) -- 聊天气泡
这里有同学建议在做聊天气泡时,可以更改为一张图集对应多个Text,这样能节省资源,不过我突然想到每个Text一个图集,可以随时更换图集,这样表情图更丰富一些,于是我就先将现有的聊天demo改为了聊天气 ...
- C#绘制三角形并填充，使用winform实现qq聊天气泡
首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
- Android 点九图机制讲解及在聊天气泡中的应用
点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...
随机推荐
- H5监听浏览器滚动条scrollbar
监听滚动条scrollbar(适配手机) 1. document.documentElement.scrollHeight:整个html的高度,含被隐藏界面高度 2. window.pageYOffs ...
- Spark SQL 之自定义删除外部表
前言 Spark SQL 在删除外部表时,本不能删除外部表的数据的.本篇文章主要介绍如何修改Spark SQL 源码实现在删除外部表的时候,可以带额外选项来删除外部表的数据. 本文的环境是我一直使用的 ...
- js面试相关
〇,字符串,数值,数组的转化 (0)检测数据类型 参考连接:http://www.cnblogs.com/onepixel/p/5126046.html 1,, typeof 操作符 : 能检测到( ...
- Maven 多模块开发
多模块开发在大项目中用得比较多,把一个项目拆分为多个模块,一个小组开发一个模块. 比如微服务,一个服务一个模块:比如ssm,持久层(dao)一个模块,业务层一个模块(service).视图层(mvc. ...
- java开发病房管理系统
开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MySQL数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mod ...
- java面向对象入门(3)-java构造方法
Java构造函数是特殊的方法(没有返回类型),使您可以在应用程序内部的其他类使用对象之前完全初始化对象状态.Java中的构造方法是使用new关键字调用的.下面让我们更深入地了解构造函数. 1.什么是j ...
- Nginx虚拟主机配置（20200202）
一台机器上跑多个站点,即多个域名 curl -xIP:port 域名 用来指定访问的域名在哪个IP的哪个端口上 Nginx默认虚拟主机 不管什么域名解析到该服务器,都会访问到默认虚拟主机 ngi ...
- Elasticsearch客户端源码剖析
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 注:本文源链接:https://www.cnblogs.com/chloneda/p/es-cli ...
- css flex弹性布局学习总结
一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...
- Python爬虫连载9-JS加密之“盐”、ajax请求
一.JS加密之“盐” 1.salt属性“盐":多用于密码学,比如我们的银行卡是六位密码,但是实际上在银行的系统里,我们输入密码后,会给原始的密码添加若干字符,形成更加难以破解的密码.这个过 ...