实现效果

实现原理

基于HTML元素边框原理及CSS伪元素实现气泡小尖角。关键点如下：

元素边框实际是由梯形组成。
当元素宽高为0、边框不断加粗时，实际边框是成三角形。
保留元素的其中一个边框，透明化另外3个边框。
通过元素的层级关系用两个三角形遮盖形成带边框的小三角。
这里使用CSS伪元素实现两个小三角。

实现代码

<html>
<head>
<meta charset='UTF-8'/>
<style>.msg_left {position: absolute;margin: 30px 30px;max-width: 200px;min-height: 20px;padding: 8px;border: solid 1px #ff6a00;border-radius: 10px;background: limegreen;}.msg_left:before {position: absolute;top: 6px;left: -20px;padding: 0;border: 10px solid;border-color: transparent #ff6a00 transparent transparent;display: block;content: '';z-index: 9;}.msg_left:after {position: absolute;top: 6px;left: -18px;padding: 0;border: 10px solid;border-color: transparent limegreen transparent transparent;display: block;content: '';z-index: 10;}
/* 右边省略，气泡样式类似 */
</style>
</head>
<title>对话框</title>
<body><div class='msg_left'>你好，这是内容。Hello,this is massage.</div><div class='msg_right'>你好，这是内容。Hello,this is massage.</div>
</body>
</html>

H5聊天对话气泡的一种实现方式及原理相关推荐

CSS聊天对话气泡伪类
CSS聊天对话气泡伪类效果图例子 <template><view class='msg-box'><text>您好,我是智慧无人商店,点击选择您想要了解的信息吧- ...
电源变频驱动主要有哪2种驱动方式？原理如何
将变频器的主电路连接到电源线后,要控制电动机的运行,必须将外围连接的控制电路连接到相应的端子,并将变频器的启动模式参数设置为外部操作模式. 电源变频驱动主要有哪2种驱动方式?原理如何变频器控制电动机 ...
浅谈Android文件管理器的几种实现方式（原理篇）--对我有帮助
转自 https://blog.csdn.net/weixin_33698823/article/details/87269955 浅谈Android文件管理器的几种实现方式为了完成毕业设计,我花费 ...
python wait until_荐selenium显示等待怎么写之WebDriverWait中until的两种实现方式及原理分析...
关于显示等待WebDriverWait是什么,可以看selenium-wait源码解析话不多说,先上实现代码: 第一种实现方式(官方提供): from selenium.webdriver.supp ...
一口气说出 OAuth2.0 的四种授权方式
上周我的自研开源项目开始破土动工了,<开源项目迈出第一步,10 选 1?页面模板成了第一个绊脚石 > ,密谋很久才付诸行动,做这个的初衷就是不想让自己太安稳,技术这条路不进步就等于后退,必 ...
java绘制聊天气泡代码_封装一个canvas画对话气泡的函数
quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点.开始点由moveTo,或者前面一次的结束点作为下次调用的开始点 ...
html5 模仿语音聊天气泡,HTML5实现对话气泡动画方法
HTML5实现对话气泡点击动画 .select-toast{position:absolute;//确定对话的位置 top:3.4rem;right:0.2rem;width:1.45rem;//确定 ...
Unity 对话气泡
前言: unity真是啥都得自己写,还是ue4牛逼. 对话气泡功能挺实用的,下图是最终的效果. 准备阶段: 文字逐字显示动画用到了DOTWeen 需要自己用PS画对话气泡需要自行学习相关的布局组件. ...
CSS实现PC端简单的聊天消息气泡样式
CSS实现PC端简单的聊天消息气泡 1. 参考博客: https://blog.csdn.net/weixin_35981962/article/details/117978624 2.实现效果 3. ...

H5聊天对话气泡的一种实现方式及原理

H5聊天对话气泡的一种实现方式及原理

实现效果

实现原理

实现代码

H5聊天对话气泡的一种实现方式及原理相关推荐

最新文章

热门文章