CSS实现表格项斜角

向右看齐 2022-06-10 13:53 770阅读 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]

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

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

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