用div+css模拟表格对角线

最新推荐文章于 2025-06-25 11:44:23 发布

原创最新推荐文章于 2025-06-25 11:44:23 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #浏览器 #Blog

css 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用CSS border属性绘制对角线的方法。通过对border属性的巧妙利用，可以在不占用实际空间的情况下生成视觉上的对角线条效果。文中提供了具体的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;}