用div+css模拟表格对角线

在蓝色理想 上看到一篇用css写的对角线，觉得很有用。

把代码down下来一看，发现原来就是巧妙地运用了border属性。

以前我也曾用border属性写过三角形，http://ice-cream.iteye.com/blog/172777

和对角线的原理基本一样

 

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;}

评论

3 楼 ice-cream 2009-07-06  

twostone 写道

可惜IE6下变了形

忘了看ie浏览器了，已经修正了，谢谢指出

2 楼 twostone 2009-06-19  

可惜IE6下变了形

1 楼 少女杀手 2009-04-14  

谢谢楼主！