CSS高效绘制三角形气泡业务组件
许多开发者在CSS样式设计中会遇到复杂的布局挑战，例如如何高效创建带有三角形指示器的对话框或气泡。本文将详细讲解如何利用CSS的::before和::after伪元素，创建一个带有黑色边框和白色填充的三角形气泡组件。
此组件的目标效果是一个带有尖角的白色气泡，外围环绕黑色边框。实现的关键在于巧妙运用::before和::after伪元素分别创建两个三角形：一个白色三角形作为气泡尖角，覆盖在一个黑色三角形之上。
以下代码实现了该效果：
立即学习“前端免费学习笔记（深入）”；
.speech-bubble {
margin: auto;
width: 200px;
height: 300px;
background: white;
border: 2px solid black;
border-radius: 25px;
position: relative;
}
.speech-bubble::before {
content: "";
position: absolute;
top: 20px;
left: -24px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 24px 12px 0;
border-color: transparent white transparent transparent;
}
.speech-bubble::after {
content: "";
position: absolute;
top: 20px;
left: -26px;
width: 0;
height: 0;
border-style: solid;
border-width: 14px 26px 14px 0;
border-color: transparent black transparent transparent;
z-index: -1;
}
代码中，.speech-bubble类定义了气泡的基本样式，包括尺寸、背景色、边框和圆角。::before伪元素创建白色三角形，通过设置border-width和border-color属性控制三角形的形状和颜色。::after伪元素创建黑色三角形，并设置z-index为-1，使其位于白色三角形下方。 通过调整top和left属性可控制三角形位置，微调border-width参数可调整三角形的尺寸和角度。这种方法简洁高效，轻松实现各种形状和颜色的三角形气泡。
