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 ...
随机推荐
- 杭电--1009 C语言实现
思路:要用有限的猫粮得到最多的javabean,则在房间中得到的javabean比例应尽可能的大. 用一个结构体,保存每个房间中的javabean和猫粮比例和房间号,然后将结构体按比例排序,则从比例最 ...
- 用Docker部署自己的JupyterHub
[话在前头] 用 Docker 部署 JupyterLab 感觉是部署 JupyterLab 最方便的方式了,官方提供了很多可选的镜像,也可以自己从 jupyter/base-notebook 中继续 ...
- 写ppt的助手
代码格式化工具. https://carbon.now.sh/?bg=rgba(74%2C144%2C226%2C1)&t=material&wt=none&l=auto&am ...
- JMeter接口测试响应数据中乱码问题解决方法
乱码产生原因: 结果处理编码与被测对象的编码不一致,JMeter是默认按照ISO-8859-1编码格式进行解析. 解决方法一: 根据接口文档或者找开发确认项目编码是哪种,因为有的项目用的是GBK,有的 ...
- JavaScript Math方法的基本使用
1.Math.sin()方法 定义:返回一个数的正弦. 语法:Math.sin(x),x必须是一个数值. 实例: <!DOCTYPE html> <html lang="e ...
- xcode 11.3 发布ipa采坑记录
为了适配ios13,特意更新了xcode11.3 .更新完后发现 application loader没有了,然后蒙了. 然后网上一顿搜索,归纳出了三种上传方式: 一.altool 使用xcode中的 ...
- java 测试 (junit+ junit 断言 + postman)
实际开发中,除了开发,我想测试也是必不可少的一环吧.从简单的@Test .main 方法测试 到 页面测试 ,断言,postman. bug是无处不在,随时发生的事,高效率的调试.检测可以节省大量的开 ...
- Jupyter Notebook 常用快捷键 （转）
Jupyter Notebook 有两种键盘输入模式. 编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的. 命令模式,键盘输入运行程序命令:这时的单元框线为蓝色. 命令模式 (按键 Es ...
- Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
这篇文章主要介绍了Pythont特殊语法filter,map,reduce,apply使用方法,需要的朋友可以参考下(1)lambda lambda是Python中一个很有用的语法,它允许你快速定义单 ...
- git commond 详解
Git commit git commit 主要是将暂存区里的改动给提交到本地的版本库.每次使用git commit 命令我们都会在本地版本库生成一个40位的哈希值,这个哈希值也叫commit-id, ...