css气泡聊天框效果
分类：实例代码
现在的聊天窗口都具有气泡效果，一个是比较美观，第二个能够明确指示发言人是谁。
下面介绍一下如何利用css实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.send{
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px;
margin:30px auto 0;
}
.send .arrow{
position:absolute;
top:5px;
right:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#FFF #FFF #FFF #F8C301;
}
</style>
</head>
<body>
<div class="send">
<div class="arrow"></div>
</div>
</body>
</html>
相关阅读:
（1）.border-radius参阅CSS3圆角效果一章节。
css气泡聊天框效果，这样的场景在实际项目中还是用的比较多的，关于css气泡聊天框效果就介绍到这了。
css气泡聊天框效果属于前端实例代码，有关更多实例代码大家可以查看。