CSS聊天对话气泡伪类

CSS聊天对话气泡伪类效果图

例子

<template>
	<view class='msg-box'><text>您好，我是智慧无人商店，点击选择您想要了解的信息吧～</text></view>
</template>

<style lang="scss" scoped>
	.msg-box {
		position: relative;
		max-width: 496upx;
		font-size: 32upx;
		color: #373737;
		padding: 22upx;
		margin-left: 16upx;
		background: #fff;
		border-radius: 20upx;
		box-sizing: border-box;

		// 气泡伪类(小三角)
		&::after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-top: 10upx solid transparent;
			border-bottom: 10upx solid transparent;
			//	左边对应 right	右边对应 left
			border-right: 12upx solid #fff;
			position: absolute;
			//	左边对应 left	右边对应 right
			left: -12upx;
			top: 24upx;
		}
	}
</style>