创建单元格的对角线边框 [英] Create diagonal border of a cell

问题描述

我不知道它甚至可以使用CSS或jQuery的，就像下面创建与对角线边界线的表格：

任何想法都会感激。

< DIV CLASS =h2_lin>解决方案

如果你摆弄它足够长，任何事情都是有可能的，这是一个使用一些创造性的边框和大量的CSS的例子：

  .arrow_box：after，.arrow_box：before {
 top：100％; 
 border：solid transparent; 
内容：; 
 height：0; 
 width：0; 
 position：absolute; 
 pointer-event：none; 
} 
  

FIDDLE

另一个使用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）; 
  

FIDDLE

，或者您只需使用图片作为表格的背景。

I wonder if it is even possible creating a table with diagonal border line using css or jquery just like below:

Any ideas will be appreciated.

解决方案

Anything is possible if you fiddle around with it long enough, here's an example using some creative borders and a lot of CSS:

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

FIDDLE

And another one using CSS3 rotate:

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

FIDDLE

or you could just use an image as the background for your table.

这篇关于创建单元格的对角线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！