使用CSS创建对话框

Question

我想创建一个不使用图片的对话框，但与 typiccal 的矩形和三角形不同，我的要稍微复杂一些。请参见以下图形：

我查看了这个网站，它似乎可以通过一些酷炫的 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中的任何其他内容之上，而你将看不到三角形被剪切的位置...

- Ben Carey

---

将父级 div 的边框半径设置为 50%，以便形成一个圆形，然后将子级 div 设置为三角形，使用绝对定位并向左偏移。从那里开始进行操作。 - ggdx

这个尖锐的形状对我来说并不像三角形... 我会发布我目前拥有的内容。 - Ben Carey

为什么不直接从你想要的气泡最相似的示例站点中获取CSS，然后从那里开始工作呢？ - Shomz

@Shomz 我玩过那样的东西，反复尝试了很多次…我真正困扰的是如何将三角形弯曲在下面。 - Ben Carey

@JasCav，请查看我的编辑以了解为什么这不是所说问题的重复。 - Ben Carey

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>

- Oka

Answer 2

这里我创建了一个简单的例子，包含椭圆和三角形。

.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>

- AleshaOleg

---

非常感谢您的帮助，但是这个问题比普通的带有底部三角形的对话框更难的是三角形是弯曲的... - Ben Carey

@BenCarey 好的，明白了，正在处理中。 - AleshaOleg