求高手写个CSS样式
http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8879deb8baa1cd1105e37a248c22e4ca/3801213fb80e7bec244239692f2eb9389a506b99.jpg
想达到上图这样效果，就像微信或是百度私信
<div class="left_usr_wrap">
<img class="usr_head" />
<div class="left_say_icon"></div>
<div class="content">hello world</div>
</div>
<!doctype html>
<html>
<head>
<style>
#page {width:300px;height:100px;margin:200px;padding:0px;border:1px solid black;}
#imge {width:100px;height:100px;float:left;}
#talkbubble {
float:left;
margin-left:20px;
margin-top:20px;
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="page">
<div id="imge"><img src="http://himg.bdimg.com/sys/portrait/item/aaef627567747069703f25.jpg" />
</div>
<div id="talkbubble"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />
<style>
body {font-size:12px;}
.rel { position:relative; }
.abs { position:absolute; }
.arr {
display:inline-block;
width:0; height:0; overflow:hidden;
border:7px dashed transparent;
}
.arr-r {
border-right:7px solid red;
}
.wrap {
margin:100px;
padding:10px;
width:200px;
border:1px solid #999;
background:#f3f8fc;
}
</style>
</head>
<body>
<div class="rel wrap">
<p>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
<span class="abs arr arr-r" style="left:-13px; top:50px; z-index:1; border-right-color:#f3f8fc;"></span>
<span class="abs arr arr-r" style="left:-14px; top:50px; border-right-color:#000;"></span>
</div>
</body>
</html>
