css实现箭头指向

最新推荐文章于 2024-09-30 10:47:07 发布

原创最新推荐文章于 2024-09-30 10:47:07 发布 · 810 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #新浪微博 #HTML

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