日期:2014-05-17  浏览次数:20603 次

css实现箭头指向

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