效果:
![](https://img-blog.csdn.net/20160607134421070?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<div class="test">
<span class="info">
<span class="tips">
测试测试测试
<em class="s_dw"></em>
</span>
</span>
</div>
<style type="text/css">
.test {
position: relative;
}
.test .info .tips {
position: absolute;
top: 20px;
margin-left: 50px;
text-align: center;
vertical-align: middle;
display: block;
line-height: 20px;
background: #F56759;
color: #fff;
padding: 3px;
border-radius: 100px;
font-size: 11px;
width: 170px;
height: 26px;
}
.test .info .tips .s_dw {
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 5px solid #FA6655;
left: 50%;
bottom: -5px;
}
</style>