css怎么制作下拉箭头

CSS制作下拉箭头

今天在学会了如何用“◇”制作我们网页中常见的下拉箭头，暂时没有用iconfont。
首先我们知道i,s等标签在HTML4的时候已经不再提倡使用（语义化方面），但是这些小标签的使用在很多大网站的开发中也起着举足轻重的作用。
话不多说，上图：

文本后面的箭头就是今天学到的。
CSS部分:

    s, i, em {
    	font-style: normal;
    	text-decoration: none;
	}
    .site-nav {
        height: 30px;
		width:120px;
        background: #ae4141;
		color: #fff;
        line-height: 30px;
		border-radius: 5px;
    }
    .site-nav-send {
        position: relative;
        padding: 0 25px 0 10px;
    }
    .site-nav i{
        width: 15px;
        height: 7px;
        position: absolute;
        top: 14px;
        right: 8px;
        overflow: hidden;
    }
    .site-nav s{
        position: absolute;
        top: -8px;
        font: 400 12px/150% "consolas";
    }

html部分：

<!--nav_start-->
<div class="site-nav">
	<div class="site-nav-send">
		送至：北京
		<i><s>◇</s></i>
	</div>
</div>
<!--nav_end-->

做成这个效果关键是处理好<i>标签和<s>标签的包含关系及溢出关系。