html做一个图片下面倒三角,html+CSS实例效果(5):em实现倒三角的提示效果

1/14P   134Records

First

Prev

1

2

3

4

5

Next

Last

.c_page{color:#0078bd;padding:0 0 20px ;font-size:12px;}

.c_page em{font-style:normal;overflow:hidden;}

.c_page span{float:left;}

.record{color:#999;padding-right:9px;}

.first ,.prev ,.next ,.last{cursor:pointer;margin:0 8px;display:inline;}

.text{padding:0 4px;}

.bar{width:2px;height:10px;background-color:#0078bd;}

.leftjib{border-color:#fff #0078bd #fff #fff;border-style:solid solid solid none;}

.rightjib{border-color:#fff #fff #fff #0078bd;border-style:solid none solid solid;}

.bar ,.leftjib ,.rightjib ,.text {float:left;}

.bar ,.leftjib ,.rightjib{display:inline;margin-top:3px;}

.leftjib ,.rightjib{border-width:5px;width:0;height:0;}

.disable{color:#999;cursor:default;}

.disable .bar{background-color:#999;}

.disable .leftjib{border-color:#fff #999 #fff #fff;}

.disable .rightjib{border-color:#fff #999 #fff #fff;}

运行代码

复制代码

另存代码

提示：您可以先修改部分代码再运行