创建单元格的对角线边框

我想知道是否有可能使用css或jquery创建一个带有对角线边界线的表，如下所示：

任何想法将不胜感激。

Answer 1

如果你用足够长的时间做任何事都是可能的，这里有一个使用一些创意边框和大量CSS的例子：

.arrow_box:after, .arrow_box:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 

小提琴

另一个使用CSS3旋转：

 -webkit-transform: rotate(26.5deg); -moz-transform: rotate(26.5deg); -ms-transform: rotate(26.5deg); -o-transform: rotate(26.5deg); transform: rotate(26.5deg); 

小提琴

或者您可以使用图像作为表格的背景。

Answer 2

正式一张桌子不能有对角线边框，但只有很少的CSS技巧你可以让它看起来如此，这里是代码..

 .borderdraw { position:fixed; border-style:solid; height:0; line-height:0; width:0; z-index:-1; } table td { width:60px; max-height:55px; border:1px solid #000; } .tag1{ z-index:9999;position:absolute;top:40px; } .tag2 { z-index:9999;position:absolute;left:40px; } .diag { position: relative; width: 50px; height: 50px; } .outerdivslant { position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 50px 0px 0px 60px;} .innerdivslant {position: absolute; top: 1px; left: 0px; border-color: transparent transparent transparent #fff; border-width: 49px 0px 0px 59px;}  

---

  
 
 
 
Tag1
 
Tag2
 
 
 
 
 
 
 
 
 
 
  

这是输出。

希望能帮助到你。

Answer 3

表格边框不能是对角线，您可以尝试使用带有一个边框的元素（div）并旋转它（如果css3没问题）