CSS实现聊天气泡效果


Posted in HTML / CSS onApril 26, 2020

 一、效果图

京东效果

 

CSS实现聊天气泡效果

模拟的效果

CSS实现聊天气泡效果 

二、原理

准备一个高度和宽度为0的盒子

将这个盒子设置一个边框

将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色

如果需要改变其大小,直接设置边框的宽度 border-width

将字体 font-size 和行高 line-height 设置为0,以免影响显示

最后使用定位将其设置到需要的位置

三、代码

HTML结构

<div class="square">
    <p class="triangle"></p>
</div>

CSS样式

.square {
  position: relative;
  width: 400px;
  height: 200px;
  background: green;
  margin: 150px auto;
}
.triangle {
	position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent red transparent;
  font-size: 0;
  line-height: 0;
}

到此这篇关于CSS聊天气泡的文章就介绍到这了,更多相关CSS聊天气泡内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
万能的php分页类
2017/07/06 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JS中style属性
2006/10/11 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python 专题四 文件基础知识
2017/03/20 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python flask框架post接口调用示例
2019/07/03 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
绩效考核实施方案
2014/03/18 职场文书
网络信息安全承诺书
2014/03/26 职场文书
超市周年庆活动方案
2014/08/16 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
2015年财政所工作总结
2015/04/25 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
python实战之用emoji表情生成文字
2021/05/08 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL