css实现聊天框

2021-10-23 12:03:15 阅读：235 来源： 互联网

标签：chatBox 实现 top solid 聊天 10px border transparent css

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

<!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;
		    }

在这里插入图片描述

标签：chatBox,实现,top,solid,聊天,10px,border,transparent,css
来源： https://blog.csdn.net/qq_40801987/article/details/120918886

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css实现聊天框