i标签通过css写出一个向下的箭头

<span style="font-family: Arial, Helvetica, sans-serif;"><i class="bottom-arrow"></i></span>

.bottom-arrow:before{
			content:"";
			border:7px solid #999;
			border-bottom:none;
			border-right-color:transparent;
			border-left-color:transparent;
			position:relative;
			top:9px;
			left:6px;
                        border-radius:2px;

<span style="font-family: Arial, Helvetica, sans-serif;">}</span>

.bottom-arrow:after{
			content:"";
			border:6px solid #fff;
			border-bottom:none;
			border-right-color:transparent;
			border-left-color:transparent;
			position:relative;
			top:7px;
			left:-6px;
		}

 效果图：