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