今天在QQ空间的情侣主页中查看arrow的实现效果，无意中发现文本域使用了“contenteditable”属性，使div变成了textarea效果，可以方便解决文本框随着内容自适应高度，contenteditable是HTML5的新属性，而且在IE浏览器中也毫不逊色，不用担心兼容的问题。
CSS代码：
<style type="text/css">
body { margin:0; padding:0; background:#f6f6f6; }
.divedit { width:650px; margin:100px auto 0; position:relative; }
.textinput { min-height:60px; _height:60px; padding:10px; font-size:12px; color:#a7a7a7; border:1px solid #d9d9d9; outline:0; background:#fff; }
.texthover .textinput { border-color:#f5507a; }
.texthover .arrowline { border-color:transparent transparent #f5507a transparent; }
.arrowbox { width:20px; height:20px; position:absolute; left:52px; top:-9px; }
.arrow { width:0; height:0; font-size:0; line-height:0; position:absolute; overflow:hidden; }
.arrowline { top:-1px; border-style:dashed dashed solid; border-width:5px; border-color:transparent transparent #d9d9d9 transparent; }
.arrowbg { top:0; border-style:dashed dashed solid; border-width:5px; border-color:transparent transparent #fff transparent; }
</style>
SCRIPT代码：
<script type="text/JavaScript"> $(function(){ $(".divedit").hover(function(){ $(this).addClass("texthover"); },function(){ $(this).removeClass("texthover"); }); }); </script>
HTML代码：
<div class="divedit">
<div contenteditable="true" class="textinput">简单的爱，真心的疼，一点温暖，许多安宁，幸福~不过如此！</div>
<span class="arrowbox">
<b class="arrow arrowline"></b>
<b class="arrow arrowbg"></b>
</span>
</div>
