纯css的标签背景

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/4/24

兼容IE7+、Chrome、FireFox!

例子截图:

 纯css的标签背景

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 }
365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/633.html