纯css的标签背景
兼容IE7+、Chrome、FireFox！
例子截图：
HTML代码如下：
即将举行
正在举行
已经举行
CSS代码如下：
.span8 { width:580px;border-right: 1px solid #DDD;background-color:#FFFFFF;-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;border-radius: 4px 0px 0px 4px;float:left;clear:both;margin-bottom:10px;min-height:120px }
.event-status-tips { width:100%;height:50px;position:relative }
.event-status { position: absolute;color:#FFFFFF;top:16px;left:-6px }
.event-status-text { font-size: 14px;line-height: 20px;height: 20px;padding: 5px 15px 5px 17px;color: #ffffff!important;background: #88CBFB;}.event-status-pointer { width: 0;height: 0;border-left: 16px solid #ad0000;border-right: 0 none;position: absolute;right: -14px;border-left-color: #88CBFB; }
.event-status-pointer.top { border-top: 0 solid transparent;border-bottom: 16px solid transparent;top: 0; }
.event-status-pointer.bottom { border-top: 16px solid transparent;border-bottom: 0 solid transparent;bottom: 0; }
.event-status-ribbon { width: 0;height: 0;border-left: 0;border-right: 5px solid #3e0012;border-top: 0;border-bottom: 5px solid transparent;border-right-color: #5E8CAD;position:absolute;bottom:0px;left:-6px}
.event-status-tips.event-status-3 .event-status-text { background:#F2710E }
.event-status-tips.event-status-3 .event-status-pointer.top { border-left-color:#F2710E }
.event-status-tips.event-status-3 .event-status-pointer.bottom { border-left-color:#F2710E }
.event-status-tips.event-status-3 .event-status-ribbon { border-right-color:#b9560a }
.event-status-tips.event-status-2 .event-status-text { background:#cccccc }
.event-status-tips.event-status-2 .event-status-pointer.top { border-left-color:#cccccc}
.event-status-tips.event-status-2 .event-status-pointer.bottom { border-left-color:#cccccc }
.event-status-tips.event-status-2 .event-status-ribbon { border-right-color:#8a8a8a }
.event-status-tips.event-status-1 .event-status-text { background:#69B93B }
.event-status-tips.event-status-1 .event-status-pointer.top { border-left-color:#69B93B }
.event-status-tips.event-status-1 .event-status-pointer.bottom { border-left-color:#69B93B }
.event-status-tips.event-status-1 .event-status-ribbon { border-right-color:#3b8113 }
相关文章
- chrome developer tool 调试技巧(2012-7-30 14:54:57)
- IE6对多个CSS样式的解析(2012-2-2 11:16:51)
- css选择器命名规则:差异及可能产生的问题(2012-2-2 10:14:33)
- CSS精灵图片(CSS sprite)使用心得(2011-9-25 11:36:22)
- 关于CSS中@font-face 嵌入字体的用法 客户端没有字体 自动下载字体(2011-6-21 10:1:23)
- CSS Sprites 样式生成工具 3.0(图片定位坐标)(2011-6-20 15:44:43)
- JS中style属性(2011-5-23 16:45:9)
- 推荐12个漂亮的CSS3按钮实现方案(2011-5-16 9:27:50)
- 12组免费的CSS3按钮强力推荐(2011-4-19 9:49:20)
- js+css+div修饰select(2011-4-6 11:57:56)
