Estilo de diálogo de burbuja de dibujo CSS (con borde)

1. Representación

2. Dificultades e ideas

Dificultad : el pequeño triángulo con un borde arriba no es fácil de implementar.
Idea : dibuja dos divisiones de diferentes tamaños para que básicamente se superpongan (dos tamaños son diferentes, no se superponen por completo, deja que el rojo muestre un pequeño borde), deja que el blanco div debe colocarse en la parte superior (establecer el índice z)

3. Implementación del código

<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;
	}