css实现聊天框

最新推荐文章于 2022-10-08 16:09:02 发布

我的天才女友

最新推荐文章于 2022-10-08 16:09:02 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_40801987/article/details/120918886

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

虽然辛苦，我还是会选择那种滚烫的人生。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			body{
				margin: 40px;
			}
		    .chatBox {
		      width: 200px;
			  height: 100px;
			  border: 1px solid #333;
			  position: relative;
			  padding: 10px;
			  border-radius: 10px;
		    }
		</style>
	</head>
	<body>
		<div class="chatBox">
			你好，亲在吗？
		</div>
	</body>
</html>

这里简单先建立一个聊天框，body元素设置margin是为了让元素显示的更加的清楚。
在这里插入图片描述

使用伪元素实现聊天框

首先使用伪元素实现三角形区域

		.chatBox::before{
				position: absolute;
				content: '';
				top:40px;
				left: -10px;
				border-top:10px solid transparent;
				border-bottom:10px solid transparent;
				border-right:10px solid #333;
			}

在这里插入图片描述
这里我们在使用一个伪元素覆盖区域这样就实现了功能

在这里插入代码片

			.chatBox::after{
				position: absolute;
				content: '';
				top:40px;
				left: -9px;
				border-top:10px solid transparent;
				border-bottom:10px solid transparent;
				border-right:10px solid #fff;
			}

在这里插入图片描述
如果添加阴影的话，box-shadow是不太好用的，实现也不是很好看，这里使用 filter属性

		    .chatBox {
			  filter: drop-shadow(0 0 4px #999);
			  background-color: #fff;
		    }

在这里插入图片描述

我的天才女友

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现聊天框

虽然辛苦，我还是会选择那种滚烫的人生。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>练习</title> <style type="text/css"> body{ margin: 40px; } .chatBox { width: 200px; height: 100px;.
复制链接

扫一扫