前段时间写了一个简单的聊天界面，好久没有写css了，生疏了很多

css对话框

主要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对话框</title>
	<style>
		#talkbubble {
			margin-left:30px;
			padding:10px;
			background: red;
			position: relative;
			display: inline-block;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;color:#fff;
			}
		#talkbubble:before {
		  content:"";
		  position: absolute;
		  right: 100%;
		  top:10px;
		  width: 0;
		  height: 0;
		  border-top: 8px solid transparent;
		  border-right: 16px solid red;
		  border-bottom: 8px solid transparent;
		}
		#chat_content{
			color:#fff;
			font-size: 20px;
			background-color: red;
			padding:10px;
			position: relative;
			display: inline-block;
			margin-top: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin-left:30px;
			border-radius: 5px;
		}
		#chat_content:after{
			content:'';
			position:absolute;
			right:100%;
			top:0px;
			width:16px;
			height:16px;
			border-width:0;
			border-style:solid;
			border-color:transparent;
			border-bottom-width:10px;
			border-bottom-color:currentColor;
			border-radius:0 0 0 32px;
			color:red;
		}
	</style>
</head>
<body>
	<div id="talkbubble">hello</div>
	<div id="chat_content">hello</div>
</body>
</html>

最后更新： 2018年10月31日 16:42

原始链接： http://irisjiao.github.io/2018/10/31/css对话框/