用CSS创建语音泡泡

Question

我试图在不使用图像的情况下创建一个语音泡泡,但与典型的带有矩形和三角形的语音泡泡不同,我的情况稍微复杂一些.请参见下图:

我看过这个网站,似乎这可能是一些很酷的CSS技巧,但我真的不知道从哪里开始.谁能指出我正确的方向？

这是我到目前为止:

.speech {
  position: relative;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50px;
}

.speech:after {
  content: "";
  display: block;
  position: absolute;
}

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

创建初始圆很容易,一旦你掌握了它们,三角形就不会太难了,我的问题是我需要以某种方式弯曲三角形以匹配图形......

这不是重复的,因为最终结果必须在所有方面都是透明的,因此可以放在DOM中的任何其他内容之上,并且您将无法看到三角形被切割的位置......

Answer 1

我会创建一个圆形伪元素,只有一面有透明背景和边框.然后使用transform和position: absolute手动将其设置到位.

您需要根据所需的气泡和尾部大小调整值.

z-index: -1 隐藏其父元素下的伪元素.

.bubble {
  position: relative;
  width: 50px;
  height: 40px;
  
  border-radius: 50%;
  
  background-color: grey;
}

.bubble::after {
  position: absolute;
  width: 40px;
  height: 40px;
  
  bottom: -2px;
  left: -16px;
  
  border-radius: 50px;
  border-bottom: 8px solid grey;
  
  transform: rotate(-55deg);
  z-index: -1;
  content: '';
  
}

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