CSS实现表格项斜角

向右看齐 2022-06-10 13:53 820阅读 0赞

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

#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>

效果图如下：  
![效果图][SouthEast]

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

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

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

[SouthEast]: /images/20220610/fcac5c1494d0493598f2bb7d583b222a.png
[SouthEast 1]: /images/20220610/74587083390d4477aaa37f1af51d4a56.png

发表评论取消回复

表情：

评论列表（有 0 条评论，820人围观）

还没有评论，来说两句吧...

相关阅读

相关纯CSS斜角渐变按钮悬停效果

纯CSS斜角渐变按钮悬停效果 ![在这里插入图片描述][300e01ce85ae438281ecdab08579cffb.gif_pic_center] <ul>

小鱼儿/ 2023年10月14日 14:30/ 0 赞/ 65 阅读

相关 html、css 实现一个漂亮的表格

最终效果：利用html、css制作一个美观、大方的表格，而且很简单，容易上手。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

比眉伴天荒/ 2023年06月19日 11:28/ 0 赞/ 22 阅读

相关 css实现斜角边框

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_s

梦里梦外;/ 2022年09月09日 13:53/ 0 赞/ 855 阅读

相关 CSS实现表格项斜角

在进行表格项斜角设置之前，先讲述一个边框的设置效果，代码和实现的效果如下： border{ border-top:30px solid f00;

向右看齐/ 2022年06月10日 13:53/ 0 赞/ 821 阅读

相关 css表格

css表格属性用来改变表格的外观。属性：设置是否把表格边框合并为单一的边框（border-collapse） border-collapse属性设置表格的边框是否

深藏阁楼爱情的钟/ 2022年06月06日 08:24/ 0 赞/ 254 阅读

相关【CSS】Table（表格）

表格边框指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框： table, th, td { b

素颜马尾好姑娘i/ 2022年04月10日 07:37/ 0 赞/ 346 阅读

相关 CSS表格

CSS表格属性允许设置表格的布局。 border-collapse：设置是否把表格边框合并为单一的边框。 > separete：默认值。边框会被分开。 > > colla

我就是我/ 2021年12月16日 03:01/ 0 赞/ 302 阅读

相关 css表格标签

表格标签表格布局：[table.thead.th.tbody.tr.td][] 控制表格的宽度：td 控制表格的高度：tr 默认的情况下:宽和高由【td】和【t

野性酷女/ 2021年11月02日 07:02/ 0 赞/ 432 阅读

相关 CSS表格

表格 > .html <!DOCTYPE html> <html lang="en"> <head> <meta charset

墨蓝/ 2021年10月19日 10:14/ 0 赞/ 432 阅读

相关 CSS表格边框

表格边框 #tablebox table{border-collapse:collapse;border:none;} #tablebox td{border:soli...

测试账号/ 2021年01月12日 02:56/ 0 赞/ 839 阅读