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{
    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;
     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;
}

效果图