css实现箭头指向

jkfzero

不用图，用简单的html和css就能实现新浪微博转发的箭头
 

<style>.forward-list {    background: none repeat scroll 0 0 #F8F8F8;    border: 1px solid #DCDCDC;    font: 100 12px/20px Verdana,"宋体";    margin: 5px 0 0;    padding: 10px;    position: relative;    z-index: 0;}.forward-arrow {    font: 12px/23px Simsun,Arial;    left: 10px;    position: relative;    top: -20px;    z-index: 1;}.forward-arrow * {    color: #DCDCDC;    height: 10px;    overflow: hidden;    width: 18px;}.forward-arrow em {    font-size: 16px;    font-style: normal;    overflow: hidden;    position: absolute;}.forward-arrow span {    color: #F8F8F8;    font-size: 16px;    left: 0;    overflow: hidden;    position: absolute;    top: 1px;}</style><div class="forward-list"><div class="forward-arrow"> <em>◆</em> <span>◆</span> </div></div> 
原理就是用到了字符◆，然后两个◆相差一像素，就是边的颜色，上面的那个◆和div的颜色一样。