html5方框的箭头怎么弄,纯CSS-带箭头的DIV方框

纯CSS无图片带箭头的DIV方框

div.container{

position:absolute;

top:34px;

left:50px;

font-size: 9pt;

display:block;

height:100px;

width:200px;

background-color:transparent;

*border:1px solid #666;

}

s{

position:absolute;

top:-20px;

*top:-22px;

left:20px;

display:block;

height:0;

width:0;

font-size: 0;

line-height: 0;

border-color:transparent transparent #666 transparent;

border-style:dashed dashed solid dashed;

border-width:10px;

}

i{position:absolute;

top:-9px;

*top:-9px;

left:-10px;

display:block;

height:0;

width:0;

font-size: 0;

line-height: 0;

border-color:transparent transparent #fff transparent;

border-style:dashed dashed solid dashed;

border-width:10px;

}

.content{

border:1px solid #666;

-moz-border-radius:3px;

-webkit-border-radius:3px;

position:absolute;

background-color:#fff;

width:100%;

height:100%;

padding:5px;

*top:-2px;

*border-top:1px solid #666;

*border-top:1px solid #666;

*border-left:none;

*border-right:none;

*height:102px;

box-shadow: 3px 3px 4px #999;

-moz-box-shadow: 3px 3px 4px #999;

-webkit-box-shadow: 3px 3px 4px #999;

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,

Direction=135, Color='#999999');

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,

Direction=135, Color='#999999')";

}

class="content">
这是框中的文字，可动态显示，高度自动增加。

^_^,www.XXX.com