您当前的位置: 站长圈 > 技术文章 > 网页前端 > 用css模拟表格斜线——用css画图(二)

用css模拟表格斜线——用css画图(二)

来源:站长圈 作者:adminzzq 点击: 0

先看效果图:


\

左上角的表格斜线是怎样用css做出来的呢?原理和我们在“用css制作一个小三角——用css画图(一)”是差不多的,也是利用设置盒子的宽高和4条边框的粗细和颜色来“画”出一个图形,看看下面这个图片,怎么样设置才能让他变成斜线呢

\
 

很显然,只要把上边框和右边框的颜色设为一个颜色,左边框和下边框的颜色设为一个颜色就行了。
css代码如下:

.box{ width:0px; height:0px; border-top:20px solid red; border-right:50px solid red; border-bottom:20px solid blue; border-left:50px solid blue; overflow:hidden; }

整个斜线表格的代码如下:

html代码:

学生 课程
PHP div+css jq+js
络绎 55 66 77
青苔 99 88 92
坚持 88 85 100

css:

*{ padding:0px; margin:0px;}
body{ padding:40px; font-size:14px;}
table{ clear:both; margin:50px auto; width:400px; border-collapse:collapse;border:1px solid #333;}
th,td{ height:40px;border:1px solid #333; background-color:#c6c7c6; text-align:center;}
#td1 th{ width:92px; background-color:#D6D3D6;}
.shu{background-color:#BDBABD;}
.xiexian_wrap{ position:relative; }
#td1 .xiexian{ width:0px; height:0px; border-top:20px solid #D6D3D6; border-right:60px solid #D6D3D6; border-bottom:20px solid #BDBABD; border-left:60px solid #BDBABD; overflow:hidden; /*表格斜线代码*/}
#td1 strong{ position:absolute; top:20px;left:10px;}
#td1 span{ position:absolute; top:5px; right:10px;}
*+html #td1 span{ right:-20px;}