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

最新推荐文章于 2022-09-27 16:48:54 发布

原创最新推荐文章于 2022-09-27 16:48:54 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

开发经验同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现聊天对话气泡，重点在于处理气泡的尖角。通过HTML元素边框原理和CSS伪元素，创建出三角形，并利用层级关系覆盖形成带边框的尖角。

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

实现效果
实现原理
实现代码

聊天对话气泡实现特别需要处理的是气泡的小尖角。

实现效果

聊天气泡

实现原理

基于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>