STYLE: border-bubble

border-bubble.css

/***气泡样式 ***/
.bubble{
	position:absolute;
	border:1px solid #C4C4C4;
	background-color:#F7F7F7;

	border-radius:10px;
	color:#333;
	margin:50px;
	text-align:center;	
}
.bubble-main{
	display:inline-blockd;
	#display:inline;
	#zoom:1;

	padding:15px 20px;
	font-size:12px;
}
.bubble-main p{
	line-height:1.7;
}
.arrow-before, 
.arrow-after{
	position: absolute;
	width:0;
	height:0;
	border:15px dashed transparent;
	font-size:0;
}
.arrow-after {
	border: 14px dashed transparent;
}
/*向上*/
.bubble-top .arrow-before, 
.bubble-top .arrow-after{
	bottom:100%;
	left:50%;
}
.bubble-top .arrow-before{
	border-bottom-style:solid;
	border-bottom-color:#C4C4C4;
	margin-left:-15px;
}
.bubble-top .arrow-after{
	border-bottom-style:solid;
	border-bottom-color:#F7F7F7;
	margin-left:-14px;
}
/*向右*/
.bubble-right .arrow-before, 
.bubble-right .arrow-after{
	left:100%;
	top:50%;
}
.bubble-right .arrow-before{
	border-left-style:solid;
	border-left-color:#C4C4C4;
	margin-top:-15px;
}
.bubble-right .arrow-after{
	border-left-style:solid;
	border-left-color:#F7F7F7;
	margin-top:-14px;
}
/*向下*/
.bubble-bottom .arrow-before, 
.bubble-bottom .arrow-after{
	top:100%;
	left:50%;
}
.bubble-bottom .arrow-before{
	border-top-style:solid;
	border-top-color:#C4C4C4;
	margin-left:-15px;
}
.bubble-bottom .arrow-after{
	border-top-style:solid;
	border-top-color:#F7F7F7;
	margin-left:-14px;
}
/*向左*/
.bubble-left .arrow-before, 
.bubble-left .arrow-after{
	right:100%;
	top:50%;
}
.bubble-left .arrow-before{
	border-right-style:solid;
	border-right-color:#C4C4C4;
	margin-top:-15px;
}
.bubble-left .arrow-after{
	border-right-style:solid;
	border-right-color:#F7F7F7;
	margin-top:-14px;
}

border-bubble.html

<div class="bubble bubble-top" style="top:320px;">
	<i class="arrow-before"></i>
	<i class="arrow-after"></i>
	<div class="bubble-main">
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
	</div>
</div>
<div class="bubble bubble-right" style="top:420px;">
	<i class="arrow-before"></i>
	<i class="arrow-after"></i>
	<div class="bubble-main">
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
	</div>
</div>
<div class="bubble bubble-bottom" style="top:520px;">
	<i class="arrow-before"></i>
	<i class="arrow-after"></i>
	<div class="bubble-main">
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
	</div>
</div>
<div class="bubble bubble-left" style="top:620px;">
	<i class="arrow-before"></i>
	<i class="arrow-after"></i>
	<div class="bubble-main">
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
		<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
	</div>
</div>