gpt4 book ai didi

html - 使用 CSS 创建对话泡泡

转载 作者:搜寻专家 更新时间:2023-10-31 22:27:17 25 4
gpt4 key购买 nike

<分区>

我试图在不使用图像的情况下创建一个对话泡泡,但与具有矩形和三 Angular 形的典型对话泡泡不同,我的对话泡泡稍微复杂一些。请参见下图:

Speech Bubble

我看过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>

创建初始圆很容易,一旦掌握了三 Angular 形就不会太难,我遇到的问题是我需要以某种方式 flex 三 Angular 形以匹配图形。 .

这不是一个副本,因为最终结果必须在所有方面都是透明的,因此可以放置在 DOM 中的任何其他内容之上,您将看不到三 Angular 形被切割的位置...

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com