css实现九种聊天气泡泡泡样式效果代码-html代码-BFW代码库

css实现九种聊天气泡泡泡样式效果代码

代码语言：html

代码描述：css实现九种聊天气泡泡泡样式效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	background-color:lightblue;
	font-family:"Ubuntu-Italic","Lucida Sans",helvetica,sans
}
.container {
	padding:5% 5%
}
.talk-bubble {
	margin:40px;
	display:inline-block;
	position:relative;
	width:200px;
	height:auto;
	background-color:lightyellow
}
.border {
	border:8px solid #666
}
.round {
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px
}
.tri-right.border.left-top:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:-40px;
	right:auto;
	top:-8px;
	bottom:auto;
	border:32px solid;
	border-color:#666 transparent transparent transparent
}
.tri-right.left-top:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:-20px;
	right:auto;
	top:0;
	bottom:auto;
	border:22px solid;
	border-color:lightyellow transparent transparent transparent
}
.tri-right.border.left-in:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:-40px;
	right:auto;
	top:30px;
	bottom:auto;
	border:20px solid;
	border-color:#666 #666 transparent transparent
}
.tri-right.left-in:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:-20px;
	right:auto;
	top:38px;
	bottom:auto;
	border:12px solid;
	border-color:lightyellow lightyellow transparent transparent
}
.tri-right.border.btm-left:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:-8px;
	right:auto;
	top:auto;
	bottom:-40px;
	border:32px solid;
	border-color:transparent transparent transparent #666
}
.tri-right.btm-left:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:0;
	right:auto;
	top:auto;
	bottom:-20px;
	border:22px solid;
	border-color:transparent transparent transparent lightyellow
}
.tri-right.border.btm-left-in:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:30px;
	right:auto;
	top:auto;
	bottom:-40px;
	border:20px solid;
	border-color:#666 transparent transparent #666
}
.tri-right.btm-left-in:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:38px;
	right:auto;
	top:auto;
	bottom:-20px;
	border:12px solid;
	border-color:lightyellow transparent transparent lightyellow
}
.tri-right.border.btm-right-in:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:auto;
	right:30px;
	bottom:-40px;
	border:20px solid;
	border-color:#666 #666 transparent transparent
}
.tri-right.btm-right-in:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:auto;
	right:38px;
	bottom:-20px;
	border:12px solid;
	border-color:lightyellow lightyellow transparent transparent
}
.tri-right.border.btm-right:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:auto;
	right:-8px;
	bottom:-40px;
	border:20px solid;
	border-color:#666 #666 transparent transparent
}
.tri-right.btm-right:after {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:auto;
	right:0;
	bottom:-20px;
	border:12px solid;
	border-color:lightyellow lightyellow transparent transparent
}
.tri-right.border.right-in:before {
	content:' ';
	position:absolute;
	width:0;
	height:0;
	left:auto;
	right:-40px;
	top:30px;
	bottom:auto;
	border:20px solid;
	border-color:#666 transparent transparent #666
}
.tri-right.right-i.........完整代码请登录后点击上方下载按钮下载查看