如何用三角形做一个透明的泡泡聊天？
要用三角形做一个透明的泡泡聊天，可以通过以下步骤实现：
- HTML布局：使用HTML和CSS创建一个包含三角形的容器。可以使用CSS的伪元素:before或:after来实现三角形效果。设置容器的背景色为透明，边框为透明，使其看起来像一个透明的泡泡。
- CSS样式：设置容器的位置、大小、圆角、阴影等样式属性，使其看起来像一个泡泡。可以使用CSS的transform属性来旋转三角形，使其指向聊天框。
- JavaScript交互：使用JavaScript监听用户的输入和操作，实现聊天框的交互功能。可以使用事件监听器来监听用户的输入，例如按下回车键发送消息。还可以使用JavaScript动态修改泡泡的内容和样式。
以下是一个简单的示例代码：
HTML:
<div class="chat-bubble">
<div class="triangle"></div>
<div class="content">这是一个透明的泡泡聊天</div>
</div>CSS:
.chat-bubble {
position: relative;
width: 200px;
height: 100px;
background-color: transparent;
border: none;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.triangle {
position: absolute;
top: 50%;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
transform: rotate(90deg);
}
.content {
padding: 10px;
color: #fff;
}这个示例代码创建了一个透明的泡泡聊天框，其中包含一个三角形指向聊天框。你可以根据需要调整容器的大小、颜色和样式。
请注意，这个示例只是一个简单的实现，实际的聊天应用可能需要更复杂的布局和交互逻辑。
相关·内容
1回答
我需要做一个透明的泡泡聊天，除了像这样的边界： ? 我发现了一个很好的设计： https://codepen.io/cool_lazyboy/pen/BWxggN 问题是，泡泡聊天点的三角形像往常一样，通过折叠宽度和扩展边界来制作，它由两个三角形组成，一个用绿色着色，另一个用白色： 一个彩色的白色： width: 0px;
height: 0px;
position: absolute;
border-left: 7px solid #fff;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
borde
浏览 18提问于2019-06-06得票数 1
回答已采纳
1回答
我正在构建一个聊天应用程序，我需要在图像中创建像这样的聊天气泡。我需要把浅绿色的笔触隐藏在气泡周围。我能够在的帮助下实现聊天泡泡形状的绘制。我怎样才能在聊天泡泡周围加上这样的一笔呢？
浏览 2提问于2022-06-07得票数 0
抱歉，标题模糊，我的英语词汇量很有限。
我正试图为我的网站做一个chatbox (工作有点像Facebook Messenger)。我拥有的是：
chatbox：
.chatbox {
width:500px;
height:500px;
max-height:500px;
display: block;
overflow: auto;
overflow-y: overlap;
position: relative;
}
聊天泡泡容器：
.chat-bubble-container {
width: 100%;
height: auto;
浏览 2提问于2020-05-05得票数 0
2回答
我需要用圆角画一个三角形(用于泡泡聊天)，如下所示，我找到了几个使用转换的解决方案:旋转、倾斜和缩放。
我的问题是：
是否可以在没有复杂css 3规则的情况下创建此形状？
性能方面，做转换:旋转，倾斜和缩放的物质或它是可以忽略不计的？(假设在移动页面上一次有6次这样的形状)
浏览 3提问于2016-05-03得票数 2
1回答
我正试着做一个聊天泡泡。所以我试着做了一个9补丁图像，但它没有自动拉伸。这是我的9张补丁图片，
这是我的聊天泡泡的XML文件。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_conten
浏览 2提问于2017-01-06得票数 1
回答已采纳
我想做一个聊天泡泡动画。当一个气泡的文本较长且需要显示更长时间时，如何中断动画。有没有什么框架或其他的东西？
view-source:这里是页面/代码
浏览 2提问于2013-06-12得票数 0
回答已采纳
我在做一个聊天泡泡。我用9patch图像制作了这个气泡。但是我想根据textview的大小来调整气泡的大小。该怎么做呢？
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:background="@
浏览 8提问于2016-12-30得票数 0
我在一个聊天应用程序项目上，我做了一个代码，如果用户不是我，该用户的气泡聊天将在左侧，如果用户是我，气泡聊天如果我将在正确的位置。 代码可以工作，但它只适用于第一次泡泡聊天，我希望它适用于那里的每个泡泡聊天，而且，我的代码生成泡泡聊天，所以没有定义许多泡泡聊天 下面是我的代码: JS window.onload = function() {
var users = $("#user").text()
var side = "msg right-msg";
var chats = $("#side");
var box = $
浏览 24提问于2020-07-18得票数 0
我想在Javascript中制作可伸缩的泡泡聊天形状。它应该以渐变颜色作为背景，并在形状周围添加边框。结果会是这样的：
圆形部分可伸展，三角形将保持在中等大小。
我尝试过以下方法：
用clipPaths绘制SVG。这里的问题是那个三角形没有保持相同的形状(它是拉伸的)。
CSS clip-path.问题是我没能用基本的形状画出这种形状。不幸的是，clip-path不能同时支持多个clip-path .
在canvas中绘制气泡并以其为背景。由于气泡应该根据内部内容展开，那么问题是当内容更改大小时获取事件，并触发画布的redraw .。
就目前而言，canvas方法可能是最简单的，但也
浏览 5提问于2021-10-15得票数 0
回答已采纳
我正在用CSS和HTML创建一个聊天气泡。
如果聊天气泡中没有文本，我不希望它显示。
我可以使用:empty让聊天泡泡的主体消失，但是我不能让chatbox的三角形部分消失，因为它是用伪选择器:before和content：' '创建的。
我的代码如下。如果h4元素为空，有没有办法让这个小三角形消失？
/* CSS talk bubble */
.myFeedback h4:empty {
display: none;
}
.talk-bubble {
margin-top: 220px;
left: 390px;
display: inline-blo
浏览 0提问于2018-10-23得票数 1
我正在尝试构建一个聊天应用程序，比如本地消息应用程序/Whatsapp。
其设计与本机聊天泡泡(矩形消息视图而不是气泡)略有不同，但我想基本内容是相同的。当然，消息应该像任何聊天应用程序一样从屏幕底部开始，在底部应该有一个“新消息”textField。
为此，我应该使用UITableView还是UICollectionView？
谢谢!
浏览 3提问于2018-01-05得票数 3
回答已采纳
1回答
我有一个用户的图片旁边的一个“聊天泡泡”，但图像显示后，气泡。
如何在聊天泡泡前定位图像并坚持到div上？
我的代码在这里：
谢谢。
浏览 3提问于2013-12-05得票数 0
回答已采纳
2回答
我想用xml资源来创建聊天泡泡，但是我不能用右边的矩形做三角形，我也试过用9个补丁图像，但是当用户输入1个字符时，它的宽度并不是包装内容。请帮助我，我也把创建的xml资源代码。
<item>
<shape android:shape="rectangle">
<solid android:color="#5EB888"/>
<corners android:radius="30dp"/>
</shape>
</item>
&
浏览 3提问于2017-06-01得票数 1
2回答
我正在设计一个聊天界面。
在我的聊天泡泡中，当我输入许多字符时，它就会超出泡泡的范围。
有什么css技术可以在一定宽度后折成一行吗？
浏览 2提问于2016-11-25得票数 2
回答已采纳
1回答
我想让我的应用程序在第一次发布的导游，但不是一个分开的导游，在那里我显示应用的图片。我想要多个像这样的聊天泡泡：
当我点击屏幕上的某个地方时，下一个会弹出。我还没有在网上找到一个教程，所以也许我只是没有使用正确的关键字.不管怎样，非常感谢！
浏览 1提问于2015-02-12得票数 0
回答已采纳
1回答
有可能有一个三角形形状的图像边框吗？
现在我正在创建这样的三角形：
.triangle {
display: block;
margin: 0 auto;
height: 51px;
width: 103px;
&:after {
content: "";
display: block;
border: inset 52px;
border-color: rgba(51, 51, 51, 0.4) transparent transparent transparent;
border-t
浏览 2提问于2014-04-15得票数 1
回答已采纳
我有一个聊天泡泡集为android:background，一个图像集为android:src，我希望适合我的图像，如果图像大于我的聊天泡泡250dp height and/or width (在下面的例子中它是我的身高)，那么顶部和底部应该被裁剪出来，以便整个图像保持在聊天气泡中。
我不想使用以下内容：
scaleType = cropInside \\这是我的图像的中心，在左边和右边的宽度上留下了太多的空间。
scaleType = fitXY \\这会使图像在聊天气泡的高度和宽度中均匀地填充，但问题是它扩展了图像。
我的XML：
<LinearLayout
浏览 1提问于2016-09-07得票数 0
2回答
我正在尝试使用XAML创建一个我认为是基本形状的东西。从本质上讲，我需要创建类似以下内容的内容：
______________^______________
| |
| Some static text will be |
| placed here in the bubble |
|____________________________|
目前，我有以下信息：
<Canvas x:Name="myCanvas">
<Path Stroke="#2D2D2D" Fill="
浏览 0提问于2013-05-12得票数 2
回答已采纳
我希望完成以下工作流程：
在我的浏览器中起草漫画面板和聊天泡泡。
聊天泡泡，动作泡泡，思想泡泡等。
上传字体文件。
编辑文本气泡
这个webapp可能是基于鼠标的WYSIWYG，但我可以使用一些不太明显的东西。
例如，如果软件作者认为比编写拖放和其他鼠标操作更容易的话，我愿意学习yaml/toml风格的语法。
该webapp有不同类型的漫画模板(标准3面板，4面板，6面板为我，漫画，和其他类型的模板，为其他用户)。
将草稿保存在类似Google或Dropbox的地方
无水印的高分辨率输出
应支持具有透明度的标准或正常格式，如PNG或PSD。
将导出的文件作为其他软件(如GIMP、Krit
浏览 0提问于2020-05-19得票数 3
我的聊天泡泡里的文字不会在新的行中被打断。
这里是从自己的角度提取的“聊天泡泡”
struct chatPartnerBubble: View {
var textMsg: String
var body: some View {
VStack(alignment: .leading) {
HStack {
HStack {
Text(textMsg)
.foregroundColor(Color.white)
浏览 4提问于2019-10-23得票数 0
回答已采纳
1回答
我在聊天应用程序上工作，我想拉伸每个文本聊天泡泡图像，但没有得到如何做到这一点。
请对这件事提出你的建议。
谢谢
浏览 0提问于2011-05-02得票数 0
回答已采纳
我要开发一个聊天应用程序。但我担心的是，我应该选择UITableView还是UICollectionView，比如whatsapp中的泡泡聊天视图。
下面是WhatsApp聊天的截图。如果有人知道WhatsApp在这个屏幕上使用了什么？
UITableView or UICollectionView??????
浏览 1提问于2014-08-08得票数 5
4回答
我正在开发一个聊天应用程序，我想创建一个聊天屏幕布局如下屏幕。
目前我正在使用ListView处理聊天文本，但问题是，要阅读长谈，我必须向下滚动，我的屏幕不会自动滚动。
我想要这种泡泡的聊天布局。如何开发这种聊天布局？
浏览 0提问于2012-05-14得票数 3
回答已采纳
我正在为Iphone开发短信应用程序..现在我想在longpress上更改我的聊天泡泡的图像(就像我复制contant时一样)。
我有这个代码..
if (longPressRecognizer.state == UIGestureRecognizerStateBegan)
{
[self becomeFirstResponder];
//NSIndexPath *pressedIndexPath = [tblOutgoingMessagesRecords indexPathForRowAtPoint:[longPressRecognizer l
浏览 2提问于2011-09-28得票数 0
回答已采纳
我需要让UITextView看起来像一个箭头聊天泡泡。我知道如何更改边框颜色、半径和边框宽度。问题是我想把箭从泡泡中拔出来。有什么办法吗？
我试着做自定义视图，里面有气泡图像，UITextView在里面，但这似乎不是最好的解决方案。
浏览 4提问于2015-01-06得票数 1
回答已采纳
2回答
我有一个泡泡图，我想要根据一个叫做重量的字段来调整气泡的大小。重量越大，我的泡泡就越大。重量从5到65不等。我不喜欢泡沫的大小范围，只要它们的大小增加。
我如何设置我的ChartSeries>CustomAttribute>BubbleMaxSize和泡泡Min大小？我不知道它应该是表达式还是设定值。
然后，我如何用函数设置我的大小字段，使气泡越大越重？
浏览 0提问于2013-09-09得票数 3
回答已采纳
1回答
谢谢你这么多年来，我从来没有发布过一个问题，只是简单地搜索！
现在，我试着用DIV画一个箭头。示例：
到目前为止，下面这样的代码将画一个三角形：
.arrow-small {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 80px 600px 50px 600px;
border-color: transparent transparent blue transparent;
}
我尝试过的一种方法是创建一个较小的填充三角形，将其放置在大三角形的
浏览 7提问于2012-12-31得票数 2
这里我正在创建一个基本的聊天应用程序。
和我的聊天泡泡显示长消息溢出错误，如何用多行显示整个消息。
无论是多行消息还是单行消息，bcz我都想改变设计，当它是多行消息时，我的意思是长消息。
这是我的密码
class MessageCardWidget extends StatelessWidget {
final MessageModel msgmodel;
final bool sendbyme;
const MessageCardWidget(
{Key? key, required this.msgmodel, required this.sendbyme})
浏览 1提问于2022-11-17得票数 0
可能重复：
我正在为我的网站做一个javascript聊天，我需要播放一个声音，当它有一个新的信息，聊天不集中，就像Facebook的聊天。问题是我不知道如何用javascript在后台播放这个声音。你能帮我一下吗？
编辑:没有Flash的跨浏览器解决方案会更好
浏览 1提问于2012-07-17得票数 2
回答已采纳
我最近注意到，当我登录到Ubuntu时，用户名旁边的聊天泡泡图标被一个带有三个点的泡泡卡住了。解决这个问题的唯一方法是将我的状态设置为“离开”或“忙碌”，然后返回可用状态。有没有人知道为什么会发生这种情况，或者有什么解决办法？
浏览 0提问于2011-05-11得票数 5
1回答
我正在创建一个小聊天应用程序。聊天泡泡是用span制造的。这是聊天气泡的CSS：
user1
{
float: right;
margin-right: 20px;
background: #4696E6;
padding:7px;
z-index:0;
line-height: 10px;
border-radius: 5px;
max-width:80%;
align-content:space-around;
line-height:15px;
font-size:15px;
word-br
浏览 3提问于2015-08-18得票数 0
回答已采纳
我正在尝试编写如下设计代码：
到目前为止，我已经设法得到了中间边缘，语音气泡和三角形的泡泡。但是，我不知道如何处理需要放在边边的相应的圆圈元素。
我这里有一个简单的模型：
我可以为每个泡泡创造元素并绝对定位它们，但这不是正确的方法。我也不能有多个psuedo元素。
我怎么才能做到这一点，而不必绝对定位他们，拜托？
浏览 1提问于2014-04-23得票数 0
回答已采纳
2回答
我在用泡泡图测试R项目。为此，我有以下csv文件：
我做了这个：
> mydata<-read.csv("~/Desktop/result.csv", header=TRUE)
> mydata
month sale comm maxcomm savings
1 23415960 706164 998457 292293
2 21303842 870591 928084 57493
3 22128502 644698 897262 252564
4 23872123 800024 1047968 2
浏览 2提问于2013-09-17得票数 2
回答已采纳
我有一个聊天泡泡的9个补丁图片。我正在将文本放置在图像组件中。我希望图像能够根据文本框中的内容展开。
这是我的版面
<View style={{flexDirection: "row"}}>
<View style={{flex: 0.8, backgroundColor:'#929238'}}>
<Image source={require('../../patch.9.png')} style={{ flexWrap:'wrap'}}>
<V
浏览 1提问于2016-10-19得票数 3
我想做像这样的聊天泡泡。
我有一个适配器来做任何事情，如图片，但我不能改变布局相同。当我添加像信使应用程序这样的项目时，我想改变聊天气泡的背景。
我怎么能做到呢？
浏览 2提问于2019-03-03得票数 0
回答已采纳
我们正在开发一个使用沃森助手的聊天机器人，当它产生一个来自发现的响应时，它会将它显示在一个不是聊天泡泡的框中，如附图所示。似乎在App.js中有一个App.js函数可能与它有关，我只是不确定要编辑什么和应该做什么才能实现这一点。是否有一种方式来格式化它，使第一个结果显示在一个聊天泡泡，而不是分开的窗口？谢谢！！
formatDiscovery(resultArr) {
resultArr.map(function(result, index) {
const formattedResult = <DiscoveryResult key={'d' +
浏览 0提问于2018-12-04得票数 0
回答已采纳
我想要自定义细胞起源x，起源y，宽度和高度。我要像这样的UITableViewCell。我要我的数据像泡泡聊天一样在手机里
浏览 8提问于2014-03-31得票数 3
回答已采纳
我有一个程序，它应该在x，y上创建一个三角形，这个三角形的高度和宽度都是固定的。这是我的代码，但是如果宽度真的很小的话，它正在创建的三角形有时会被弄乱。如何用我想要的任何数字作为宽度和高度来做一个完美的三角形？
进口海龟
def triangleBuild(width,height):
turtle.forward(width)
turtle.left(120)
turtle.forward(height)
turtle.left(120)
turtle.forward(height)
def xYPostion(x，y，宽度，高度)：
turtle.p
浏览 1提问于2013-10-24得票数 0
回答已采纳
1回答
我正在使用UITable实现一个泡泡聊天，我希望每次有人发布消息时，该表都会向下滚动。是否可以使表视图向下滚动？我该怎么做呢？
浏览 0提问于2010-11-26得票数 2
回答已采纳
1回答
我在android聊天应用程序上工作。我需要使用泡泡聊天短信。这方面有什么可行的例子吗？这将是非常有用的，如果有人谁在这类应用程序的工作可以指导我很少的工作例子。
提前谢谢。
浏览 0提问于2012-03-01得票数 0
1回答
我正在为Android创建一个应用程序，但我注意到当有人通过facebook聊天向我发送消息时，聊天气泡(聊天头)是不可见的。我必须留下我的申请来回答。我不希望用户离开我的应用程序。
为什么在我的应用程序中，只有某些activitys的聊天泡泡是不可见的？我能做些什么让他们看到任何活动？
浏览 0提问于2014-05-30得票数 2
回答已采纳
3回答
嗨，我想用边框制造一个半透明的语音泡泡。为了制作三角形，我在大三角形中使用了一个：：using元素，对于位于顶部的一个较小的三角形，我使用了：：后置元素，所以看起来它有一个边框。但是，由于我希望它是半透明的，所以可以看到：：ruins元素并破坏它。请帮我把这个修好
.bubble {
max-width: 75%;
min-width: 200px;
padding: 8px 12px 0 12px;
position: relative;
border-radius: 4px;
text-align: left;
margin-left: auto;
ba
浏览 0提问于2021-09-11得票数 2
回答已采纳
我想在我的应用程序中集成iPhone短信，就像聊天泡泡一样。但当我读到更多关于它的内容时，我发现这不会被应用商店批准。这是真的吗？我们不能在应用程序中使用聊天气泡吗？
这里有一些描述这一点的链接。
谢谢
浏览 0提问于2010-10-10得票数 0
回答已采纳
1回答
我正在实现一个页面，定期刷新从数据库中获取随机意见-消息，并显示在聊天气泡中，与用户的照片和日期。我希望聊天气泡应该滚动起来，因为新的消息增加在底部。我从许多网页上得到的好的聊天泡泡css很少。我不知道如何实现在顶部(较旧的)消除旧的聊天气泡( 'div')并在底部添加新气泡的滚动？每次调用ajax时，只会获取一条随机消息。
浏览 2提问于2014-03-18得票数 0
我得做一个这样的头像：
我没有问题，使标题与这个梯度。我还知道如何用::after定位三角形。但是，如何使三角形颜色与标题背景相匹配？问题是梯度不是静态的。例如，如果我在智能手机中打开页面，因为屏幕更短，梯度将比在监视器中打开时更“紧凑”。所以箭头的颜色不能是静态的。我不知道该怎么做，有人能帮我吗？谢谢。
浏览 2提问于2018-04-02得票数 2
回答已采纳
3回答
我试着做一个气泡，它将响应，无论是在用户设备上，也有一个三角形在左侧的网站。
它应该是什么样的：
我试过的是：
HTML：
.responsive-bubble {
position: relative;
display: inline-block;
max-width: 80%;
min-width: 80%;
min-height: 1.5em;
padding: 20px;
background: #ebebeb;
border: #ebebeb solid 4px;
-webkit-border-radius: 20px;
-moz-b
浏览 6提问于2016-01-24得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
