使用 CSS 创建对话泡泡

Question

我想在不使用图像的情况下创建对话气泡，但与具有矩形和三角形的典型对话气泡不同，我的对话气泡要复杂一些。见下图：

我看过 this site ，似乎可以通过一些很酷的 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

Here 我用椭圆形和三角形创建了一个简单的例子。

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  width: 50px;
  height: 40px;
  color: #000;
  background: #f3961c;
  border-radius: 50px / 40px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 5px;
  width: 0;
  border-width: 25px 8px 0 8px;
  border-style: solid;
  border-color: #f3961c transparent;
  -ms-transform: rotate(35deg); /* IE 9 */
  -webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */
  transform: rotate(35deg);
}

<div class="triangle-isosceles"></div>

Answer 2

我会创建一个圆形的伪元素，只有一侧有透明背景和边框。然后用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>

使用 CSS 创建对话泡泡

Create Speech Bubble with CSS

html

css

css-shapes