CSS实现聊天气泡（三角形）

左边聊天气泡

	/* CSS */
	.frame{
		width: 100%;
		float: left;
		position: relative;
		padding: 0 0 0 5px;
	}
	.triangle{
		width:0;
		height:0;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-right:5px solid #98E165;
		position: absolute;
		left: 0;
		top: 6px;
	}
	.rotationtiao{
		float: left;
		padding: 5px 10px;
		background-color: #98E165;
		font-size: 14px;
		border-radius: 2px;
	}



	<!-- HTML -->
	<div class="frame">
		<div class="triangle"></div>
		<span class="rotationtiao">这是一段聊天内容</span>
	</div>

右边聊天气泡

	/* CSS */
	.frame{
		width: 100%;
		float: left;
		position: relative;
		padding: 0 5px 0 0;
	}
	.triangle{
		width:0;
		height:0;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-left:5px solid #98E165;
		position: absolute;
		right: 0;
		top: 6px;
	}
	.rotationtiao{
		float: right;
		padding: 5px 10px;
		background-color: #98E165;
		font-size: 14px;
		border-radius: 2px;
	}



	<!-- HTML -->
	<div class="frame">
		<div class="triangle"></div>
		<span class="rotationtiao">这是一段聊天内容</span>
	</div>

左三角

.triangle{
	width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-right:20px solid red;
}

右三角

.triangle{
	width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid red;
}

上三角

.triangle{
	width:0;
    height:0;
	border-right:20px solid transparent;
	border-left:20px solid transparent;
	border-bottom:20px solid red;
}

下三角

.triangle{
	width:0;
    height:0;
	border-right:20px solid transparent;
	border-left:20px solid transparent;
	border-top:20px solid red;
}

有什么问题欢迎评论留言，我会及时回复你的