用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

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

import itertools as it
from io import TextIOBase

class IterStringIO(TextIOBase):
    def __init__(self, iterable=None):
        iterable = iterable or []
        self.iter = it.chain.from_iterable(iterable)

    def not_newline(self, s):
        return s not in {'\n', '\r', '\r\n'}

    def write(self, iterable):
        to_chain = it.chain.from_iterable(iterable)
        self.iter = it.chain.from_iterable([self.iter, to_chain])

    def read(self, n=None):
        return bytearray(it.islice(self.iter, None, n))

    def readline(self, n=None):
        to_read = it.takewhile(self.not_newline, self.iter)
        return bytearray(it.islice(to_read, None, n))

Answer 2

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;