日期:2014-05-17 浏览次数:20637 次
不用图,用简单的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的颜色一样。