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

Jeff

发布于 2018-01-19 03:45:06

2.3K0

文章被收录于专栏：DeveWorkDeveWork

这里所说的带尖角浮出公告栏就是指本站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;}