CSS实现尖角位于左中右的自定义speech bubble对话气泡方案咨询

核心通过CSS伪元素实现菱形尖角，通过垂直偏移实现尖角半嵌入效果，以下是可直接复用的代码：

HTML结构示例 #

<!-- 尖角底部左侧 -->
<div class="bubble bubble-left">气泡内容 左侧尖角</div>
<!-- 尖角底部中间 -->
<div class="bubble bubble-center">气泡内容 中间尖角</div>
<!-- 尖角底部右侧 -->
<div class="bubble bubble-right">气泡内容 右侧尖角</div>

CSS样式代码 #

/* 气泡基础样式 */
.bubble {
  position: relative;
  max-width: 300px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 30px; /* 留出尖角显示的空间 */
}
/* 菱形尖角公共样式 */
.bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: inherit; /* 继承气泡背景色，修改气泡背景时自动同步 */
  transform: translateY(50%) rotate(45deg); /* 核心逻辑：下移50%实现半嵌入效果，旋转得到菱形 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.08); /* 匹配气泡阴影效果 */
}
/* 左侧尖角 */
.bubble-left::after {
  left: 16px; /* 可自行调整左侧距离 */
}
/* 中间尖角 */
.bubble-center::after {
  left: 50%;
  transform: translateY(50%) translateX(-50%) rotate(45deg); /* 补充横向居中偏移 */
}
/* 右侧尖角 */
.bubble-right::after {
  right: 16px; /* 可自行调整右侧距离 */
}

自定义调整说明 #

• 调整尖角大小：直接修改.bubble::after的width、height数值即可，偏移量会自动适配
• 切换尖角到顶部：把伪元素的bottom:0改成top:0，同时把transform的translateY(50%)改成translateY(-50%)
• 调整气泡圆角、阴影、边距等参数，直接修改.bubble对应的属性即可

内容的提问来源于stack exchange，提问作者shekler