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 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 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
短波问题解答
2021/02/28 无线电
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python list删除元素时要注意的坑点分享
2018/04/18 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
PHP面试题集
2016/12/18 面试题
业务助理岗位职责
2013/11/18 职场文书
后勤岗位职责
2013/11/26 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
安全生产专项整治方案
2014/05/06 职场文书
文明村镇申报材料
2014/05/06 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2015年财政所工作总结
2015/04/25 职场文书
婚宴新郎致辞
2015/07/28 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python