CSS使用菱形◆制作气泡对话框(兼容IE6 IE9)

<div id="head_tips">
<div class="tips_arrow"><em class="S_line1">◆</em><span class="S_bg1">◆</span></div>
<a href="#">1</a> 条系统消息 <a href="#">点击查看</a>
</div>

#head_tips{
width:172px;
height:auto;
line-height:22px;
font-size:14px;
text-align:center;
background-color:#F7F7F7;
border:1px solid #c9c9c9;
padding: 10px 10px;
margin: 6px 0 0;
}
.tips_arrow{
position: absolute;
margin: -18px 0 0;
margin: -17px 0 0/9;
width: 22px;
cursor: default;
}
.tips_arrow * {
font-family: "SimSun";
overflow: hidden;
font-size: 12px;
line-height: 1.231;
display: block;
height: 12px;
font-style:normal;
}
.S_line1 {
color: #c9c9c9;
}
.S_bg1 {
color: #F7F7F7;
margin: -11px 0 0;
}
#head_tips a{
color:#fc7100;
}