CSS小技巧一：用div+css模拟表格对角线 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用div+css模拟表格对角线</title>
    <style type="text/css">
    * { margin:0; padding:0; }
    table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999; font-size:13px; text-align:center; width:500px; margin:50px auto; }
    td,th { border-right:1px solid #999; border-bottom:1px solid #999; padding:5px 0; background:#ddd; }
    td { background:#F7F8F5; }
    .mytablbox { width:100px; }
    .mytable { width:0; height:0; margin:-5px 0; position:relative; border-top:50px solid #ddd; border-left:100px solid #F7F8F5; }
    .mytable strong { display:block;position:absolute;top:-40px;left:-40px;width:35px; font-style:normal; } 
    .mytable em { position:absolute; left:-90px; top:-17px; display:block; width:30px; font-style:normal; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th class="mytablbox">
                <div class="mytable">
                <strong>类别</strong>
                <em>姓名</em>
                </div>
            </th>
            <th>表格</th>
            <th>表格</th>
        </tr>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
        <tr>
            <td>表格</td>
            <td>表格</td>
            <td>表格</td>
        </tr>
    </table>
</body>
</html>

 

 原理：利用border-top:50px solid #ddd; border-left:100px solid #F7F8F5;模拟出三角形；

　　　　再用css定位固定文字的位置。

 

posted @ 2012-04-16 09:44  赵小磊  阅读(1123)  评论(1)    收藏  举报
回到头部