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是为了让元素显示的更加的清楚。
css实现聊天框_第1张图片

使用伪元素实现聊天框

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

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

css实现聊天框_第2张图片
这里我们在使用一个伪元素覆盖区域这样就实现了功能

在这里插入代码片
			.chatBox::after{
				position: absolute;
				content: '';
				top:40px;
				left: -9px;
				border-top:10px solid transparent;
				border-bottom:10px solid transparent;
				border-right:10px solid #fff;
			} 

css实现聊天框_第3张图片
如果添加阴影的话,box-shadow是不太好用的,实现也不是很好看,这里使用 filter属性

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

css实现聊天框_第4张图片

你可能感兴趣的:(css,css,css3,html)