分享一款带尖角浮出公告栏样式

2013/04/11 前端代码, 前端开发大前端 2 10,023

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏，这个广告栏是纯用css+html打造的，没有使用图片。该代码最初来自大前端，经过简单的改造Jeff 移植到了WordPress主题中。下面先给出演示地址先(当然，本站也算是一个演示地址)：

带尖角浮出公告栏样式:演示地址

做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的，制作三角形也可以用这个原理。据我所知，制作三角形的话还可以直接用css（好像border属性+margin=0），当然也可以直接用图片。其实我认为用图片也没啥问题啊，用css做个三角形的代码占用空间比个用图片的都大，如果我将图片用cssscript合并，请求数几乎不增，总体还占用更少空间。啊啊……说多了，直接上代码了（源代码来自大前端,在这里提供本站使用的这个左侧角的代码）：

Html部分:

 <div class="poptip">
     <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
     Hi，又一个WordPress站点上线了！目前<br>是测试状态，欢迎各位反馈主题bug！来自Devework.com
 </div>

css部分:

.poptip{background:#FFFCEF;color: #DB7C22;float:left;position: relative;top:8px;left:40px;height: 35px;padding: 6px 10px 5px;font-size: 12px;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}
.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color:#FFBB76;}
.poptip-arrow i{color: #FFFCEF;}
.poptip-arrow-left{left:-6px;height: 12px;width: 6px;top: 12px;margin-top:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

希望尖角居中显示，可以在.poptip-arrow这个span上加上style="left:50%"或者style="top:50%"

这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器，所以不必担心其兼容性和实用性。

还是那句，需要根据具体情况修改相关代码，直接套用是不行的。