ice-cream 发表于 2013-1-29 07:39:51

用div+css模拟表格对角线

在蓝色理想上看到一篇用css写的对角线,觉得很有用。
把代码down下来一看,发现原来就是巧妙地运用了border属性。
以前我也曾用border属性写过三角形,http://ice-cream.iteye.com/blog/172777
和对角线的原理基本一样
http://www.agoit.com/upload/attachment/73801/3c2db7e5-d70b-3b08-97cd-6e5732fb29e1.jpg
 
css代码的精华部分
/*模拟对角线*/.out{   border-top:40px #d6d3d6 solid;/*上边框宽度等于表格第一行行高*/   width:0px;/*让容器宽度为0*/   height:0px;/*让容器高度为0*/   border-left:80px #bdbabd solid;/*左边框宽度等于表格第一列宽度*/   position:relative;/*让里面的两个子容器绝对定位*/   top:0;}b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;}em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;}
页: [1]
查看完整版本: 用div+css模拟表格对角线