CSS实现表格项斜角

在进行表格项斜角设置之前，先讲述一个边框的设置效果，代码和实现的效果如下：

#border{    border-top:30px solid #f00;    border-right:30px solid #0f0;    border-bottom:30px solid #00f;    border-left: 30px solid #000;    width: 0;}<div id="border"></div>

效果图如下：

就是利用了边框的这种属性来达到斜线的效果，在下面的程序中使用两层边框叠加的效果来实现斜线的效果

<style>    .border{        border-top:30px solid transparent;        border-left: 100px solid #000;    }    .border1{        border-top: 30px transparent solid;        border-left: 100px solid #fff;        position: absolute;        top: 1px;        left: 0;    }    #din1{        position: relative;    }    #title{        position: absolute;        top:-5px;        left: 0;        width: 100px;    }    #row{        text-align: right;    }    #column{        text-align: left;    }</style><table border="1">    <tr>        <th id="din1">            <div class="border"></div>            <div class="border1"></div>            <div id="title">                <div id="row">ROW</div>                <div id="column">COLUMN</div>            </div>        </th>        <th>Column1</th>        <th>Column2</th>    </tr>    <tr>        <td>Row1</td>        <td>Content11</td>        <td>Content12</td>    </tr>    <tr>        <td>Row2</td>        <td>Content21</td>        <td>Content22</td>    </tr></table>

效果如下：


在第一个th标签里添加若干个div标签。在第一个div标签添加上侧和左侧边框，使得产生黑色三角斜角，在第二个div标签设置起始位置后添加透明的上侧边框及白色左边边框，在两个的边框叠加下出现对角线。当border取值为transparent时，就表示为透明边框，就没有颜色表示。