Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

Demo

HTML:

<div class="bubble">
	<div class="pointer">
		<div class="one"></div>
		<div class="two"></div>
	</div>
	<div class="content">
		<p>Hey do you like this bubble?</p>
	</div>
</div>

CSS:

.bubble {
	width:400px;
	color:#efefef;
}
.bubble .pointer {
	height:15px;
	background:#393939;
}
.bubble .pointer div {
	height:100%;
	background:#ffffff;
}
.bubble .pointer .one {
	width:50%;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius:15px;
	float:left;
}
.bubble .pointer .two {
	width:50%;
	float:right;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius:15px;
}
.bubble .content {
	padding:10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	background:#393939;
	text-align:center;
}

Demo