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

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

实现效果

实现原理

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

1. 元素边框实际是由梯形组成。
2. 当元素宽高为0、边框不断加粗时，实际边框是成三角形。
3. 保留元素的其中一个边框，透明化另外3个边框。
4. 通过元素的层级关系用两个三角形遮盖形成带边框的小三角。
5. 这里使用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>