文本背景框代码

代码演示

HTML代码

<style type="text/css">
#div1 {
width:200px;
background:#cfe2f3;//框内底色
position:relative;
margin:0 0 10px 0;
padding:3px 2px;
color:green;
line-height:1.2em;
border:2px solid #6d9eeb;//边框颜色
display:inline-block;
text-align:justify;
}
.i1 {
display:inline-block;
width:0;
height:0;
line-height:0;
border-width:8px;
border-style:solid;
border-color:transparent #87CEEB transparent transparent;
_border-color:#fff #fff #87CEEB #fff;
position:absolute;
left:-16px;
top:50%;
margin-top:-8px;
}
.i2 {
display:inline-block;
width:0;
height:0;
line-height:0;
border-width:8px;
border-style:solid;
border-color:transparent transparent transparent #87CEEB;
_border-color:#87CEEB #87CEEB #87CEEB #87CEEB;
position:absolute;
right:-16px;
top:50%;
margin-top:-8px;
}
</style>
<div id="div1"><span class="i1"></span>输入内容文字，不限字数<span class="i2"></span></div>