CSS绘制气泡对话框样式（有边框）

1、效果图

2、难点和思路

难点：上面那个带边框的小三角不好实现
思路：画两个不同大小的div，使其基本重叠（两个大小不同，不完全重叠，让红色的露出一点边边），让白色div放到最上层（设置z-index）

3、代码实现

<p class="pSanStyle"><p class="pSanStyleInner"></p></p>
		<div class="divStyle">
			<p style="padding: 10px 0 0 10px; font-weight: bold">项目</p>
			<hr style="width: 240px" />
			<a-row>
				<a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px"
				>项目名称</a-col
				>
				<a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px"
				>项目名称</a-col
				>
				<a-col :span="7" style="margin: 5px 0 5px 5px">项目名称</a-col>
			</a-row>
		</div>

.pSanStyle {
    
    
		width: 0;
		height: 0;
		position: relative;
		border: 10px solid transparent;
		border-color:  transparent transparent red  transparent ;
		margin-left: 50px;
	}
	.pSanStyleInner{
    
    
		width: 0;
		height: 0;
		border: 12px solid transparent;
		border-color:  transparent transparent white  transparent ;
		position: absolute;
		margin-left: -11.5px;
		margin-top: -10px;
		z-index: 21;

	}
	.divStyle {
    
    
		position: absolute;
		width: 260px;
		height: 150px;
		margin-top: 20px;
		background-color: white;
		padding: 10px;
		border: 1px solid red;
	}