css实现聊天气泡对话框

方法1:实现这种扁平化的气泡对话框只需用行内块元素+伪类做小三角即可

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background: #eee;">
	<style>
		.pp1 span{
			background-color: #fff;
			padding: 5px 8px;
			display: inline-block;
			border-radius: 4px;
			margin:10px 0 10px 10px;
			position: relative;
			
		}
		.pp1 span::after{
			content: '';
			border: 8px solid #ffffff00;
			border-right: 8px solid #fff;
			position: absolute;
			top: 6px;
			left: -16px;
		}
	</style>
	<div class="pp1">
		<span>文本文本文本文本</span>
		<span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</span>
	</div>
</body>
</html>

这里小三角的实现知识点是border的运用,如下样式会得到这样的图形在这里插入图片描述
border-top: 20px solid red;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;

方法2:绘制带边框的气泡对话框

在这里插入图片描述
这个很简单,个人比较推荐这种方法,而且可以加各种小角,几乎没有限制,
绘制一个带边框的对话框+小角的图片定位好即可,
这里注意小角的图片制作时要多点白底,用来遮住对话框的边,
这一部分白底要多1到2像素,用来遮住对话框的边,
实际留白要看对话框的边框宽度,我这里是1像素,所以我多留了2像素的白,
如下所示(为了看的清楚加了黄色底):
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background: #eee;">
	<style>
		.pp2 p{position: relative;margin: 0;}
		.pp2 span{
			background-color: #fff;
			padding: 5px 8px;
			display: inline-block;
			border-radius: 4px;
			margin-left:7px;
			border: 1px solid #999;
		}
		.pp2 img{
			position: absolute;
			top: 6px;
			left: 1px;
		}
	</style>
	<div class="pp2">
		<p><span>文本文本文本文本</span><img src="jjj.png" width="9" alt=""></p>
		<br>
		<p><span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</span><img src="jjj.png" width="8" alt=""></p>
		<br>
	</div>
</body>
</html>

方法3:使用了border-image,中间遇到了很多坑,不太推荐使用,效果如下:

在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background: #eee;">
	<style>
		.pp3 span{
			display: inline-block;
			border-top: 32px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 20px solid transparent;
			border-image: url(aa.png) 32 10 10 20 round;
			margin: 10px 0;
		}
		.pp3 i{
			display: inline-block;
			margin-top: -22px;
			background-color: #fff;
			float: left;
			font-style: normal;
		}
	</style>
	<div class="pp3">
		<span><i>文本文本文本文本</i></span>
		<span><i>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</i></span>
	</div>
</body>
</html>

关于border-image的知识请自行百度,最重要的是图片的制作,以及border值得设置:

在这里插入图片描述

border-top: 32px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid transparent;
border-image: url(aa.png) 32 10 10 20 round;

数值顺序是上右下左四条线分别到边的距离,注意border-image的数值没有单位.

这里碰到的

要着重说一下,本来想的是直接在span里写文字,结果碰到了如下图中所示的问题:
文字被border顶下来了

在这里插入图片描述

在这里插入图片描述
这时想到的是在span里在套一层,让后用margin-top负值拉上去,然后也确实拉上去了,但是只有多行文本拉上去了,单行的还是老样子,如下所示:
在这里插入图片描述
这是什么情况?然后我把文本都删掉就变成这这样子:
在这里插入图片描述在这里插入图片描述这是啥情况,里面明明啥文字也没有了,咋还这么高?
然后我把span里面的i标签也删掉,就变成了这个样子:
在这里插入图片描述在这里插入图片描述
原来是里面的元素把span给撑起来了,只有一行文本的时候,margin-top负值起不到作用了,因为只要span里有标签,那它最低也就那么高了,不能更低了
到这里,我卡住了,不知道该咋弄了,于是把能想到的样式往上加,无意中给i标签加了个浮动,神奇的事情发生了,正常了!
单行文本正常了,多行文本也能撑起父级元素,没有溢出,具体原理我也不明白,按理说子元素浮动,父元素应该塌下去,但是没有,而且我也没用清除浮动的样式,真是神奇
在这里插入图片描述

  • 9
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现聊天气泡效果,可以使用以下的CSS样式: HTML结构: ```html <div class="chat-container"> <div class="chat-message received"> <div class="message-bubble"> <span class="message">Hello!</span> </div> </div> <div class="chat-message sent"> <div class="message-bubble"> <span class="message">Hi there!</span> </div> </div> <div class="chat-message received"> <div class="message-bubble"> <span class="message">How are you?</span> </div> </div> <div class="chat-message sent"> <div class="message-bubble"> <span class="message">I'm good, thanks. How about you?</span> </div> </div> </div> ``` CSS样式: ```css .chat-container { display: flex; flex-direction: column; padding: 20px; background-color: #eee; height: 400px; overflow-y: scroll; } .chat-message { display: flex; margin-bottom: 10px; } .received { align-self: flex-start; } .sent { align-self: flex-end; } .message-bubble { background-color: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); position: relative; } .message-bubble:before { content: ""; position: absolute; top: 0; border-style: solid; border-width: 0 10px 10px 0; } .received .message-bubble:before { left: -10px; border-color: #fff transparent transparent transparent; } .sent .message-bubble:before { right: -10px; border-color: #007bff transparent transparent transparent; } .message { line-height: 1.5; font-size: 14px; } ``` 解释: - `chat-container`是聊天窗的容器,设置了`flex`布局和垂直方向的排列,以及一些基本的样式,如背景色、高度和滚动条等。 - `chat-message`是每个聊天消息的容器,设置了`flex`布局和一些基本的样式,如外边距等。 - `.received`和`.sent`分别表示接收到的消息和发送的消息,设置了不同的对齐方式。 - `message-bubble`是消息气泡的容器,设置了一些基本的样式,如背景色、边框半径、内边距和阴影等,以及相对定位。 - `.message-bubble:before`是消息气泡的三角形,使用`content`属性来插入一个空内容,设置了绝对定位、上边距、边框样式和边框宽度,并根据消息的来源设置了不同的位置、边框颜色和方向。 - `message`是消息内容的容器,设置了一些基本的样式,如行高和字体大小等。 这些样式可以根据实际需求进行调整,以达到更好的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值