不用图,用简单的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的颜色一样。