如何在渐变背景下仅用CSS隐藏气泡对话框的曲线尾部

你遇到的问题很典型——气泡对话框的曲线尾部有一块白色空白，在渐变背景下显得特别突兀。其实问题出在你原来代码里的:after伪元素用了固定的白色背景，和页面的渐变背景不匹配，所以才会露出这块空白。

我给你调整了代码，去掉了多余的:after伪元素，只用一个:before就能完美实现尾部效果，而且不会有空白区域：

body { 
  background: #1e5799; 
  background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #2989d8 50%, #7db9e8 100%); 
  background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#2989d8 50%,#7db9e8 100%); 
  background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#2989d8 50%,#7db9e8 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); 
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
} 

.speech-bubble { 
  position: relative; 
  background: #ddd; 
  border-radius: .4em .4em .4em 0; 
  width: 100px; 
  padding: 30px 15px; 
  margin:auto; 
  text-align: center; 
  color: white; 
  font-weight: bold; 
  font-size: 200%; 
  text-shadow: 0 -0.05em 0.1em rgba(0,0,0,.3); 
} 

.speech-bubble:before { 
  content: ""; 
  position: absolute; 
  bottom: 0;
  right: 100%;
  width: 30px;
  height: 30px;
  background: #ddd;
  border-bottom-right-radius: 80px;
  transform: translateX(2px);
}

对应的HTML保持不变：

<div class="speech-bubble"></div>

调整说明： #

1. 移除了原来的:after伪元素——这就是导致白色空白的根源，它的固定白色背景和页面渐变完全不兼容。
2. 简化了:before伪元素的逻辑：直接用和气泡主体相同的#ddd背景，通过border-bottom-right-radius绘制出圆角尾部，再用transform: translateX(2px)微调位置，让它和气泡主体完美衔接，不会留下缝隙。
3. 给body加了min-height: 100vh和flex布局，确保气泡在页面垂直居中，方便预览效果。

这样修改后，气泡尾部就完全和主体融为一体，不管页面背景是渐变还是其他复杂样式，都不会再露出突兀的空白区域啦。

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