相关疑难解决方法(0)

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

我看过这个网站,似乎这可能是一些很酷的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中的任何其他内容之上,并且您将无法看到三角形被切割的位置......

大家好我想用CSS ::after伪元素制作一个弯曲的三角形讲话泡泡.

我创建了这个 DEMO:

.test 
{
position: relative;
width: 430px;
height: 175px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.test:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -14px;
left: 8px;
}

我该怎么办？