看到很好奇，想学习一下
转自：http://www.rainoina.com/raino/archive/413.html
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="description" content="" />
<title></title>
<script type="text/javascript" src=""></script>
</head>
<body>
<style type="text/css">
body{
padding:20px;
font:12px/1.5 tahoma;
}
.bubble-box{
background:#EEE;
width:200px;
height:60px;
margin-bottom:30px;
}
.bubble-box .wrap{
background:#EEE;
/* 修正IE6 */
_position:relative;
_z-index:10;
}
/* arrow-effect */
.arrow-left{ border-left:20px solid #FFF; border-top:20px solid #EEE; }
.arrow-right{ border-right:20px solid #FFF; border-top:20px solid #EEE; }
.arrow-top{ border-left:20px solid #EEE; border-top:20px solid #FFF; }
.arrow-bottom{ border-left:20px solid #EEE; border-bottom:20px solid #FFF; }
.arrow-left .wrap,
.arrow-right .wrap{
width:180px;
height:60px;
padding:10px 10px 0;
margin-top:-40px;
}
.arrow-top, .arrow-bottom{ width:140px; height:100px; }
.arrow-top .wrap,
.arrow-bottom .wrap{
width:180px;
height:90px;
padding:10px 10px 0;
margin-left:-40px;
}
</style>
<div class="bubble-box arrow-left">
<div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>
<div class="bubble-box arrow-right">
<div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>
<div class="bubble-box arrow-top">
<div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>
<div class="bubble-box arrow-bottom">
<div class="wrap">一些话，一些话，一些话，一些话，一些话</div>
</div>
</body>
</html>