纯CSS实现角标效果

最近写了个主题,由于想从简,所以没用图片,
在content.php中的php the_title前加上条件判断使角标只出现在置顶文章旁,

<?php if( is_sticky() ) echo '<div id="sticky"></div>'?> 

下面是CSS,

#sticky{
width:1px;
height:0px;
position:absolute;
margin-left: 548px;
margin-top: -11px;
border-left:50px solid #f2f2f2; //与主题相容
border-top:50px solid #9c0000;
}

效果如下

纯CSS实现角标效果

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 零落千起

    css这个东西真不是人玩的

    二月 7, 2013 20:34:45
  2. 板 凳 figo

    你所谓的角标是图中蓝色的效果吗,css可以做到?
    你这个悬浮右上页角翻卷效果很炫啊~~

    二月 27, 2013 13:24:17
  3. 地 板 不亦乐乎

    刚好用上。 :meme:

    三月 22, 2013 13:06:10
  4. 地 毯 刘荣焕

    现在的右上角划过时候的角就是基于此搞出来的

    三月 29, 2013 22:33:57
  5. 地 面 limitsy

    求教css T_T 跟之前学的c++ java之类的差好大 T_T

    十一月 26, 2013 11:43:26