Create diagonal border of a cell

cell, css, css-tables, diagonal, jquery

Solution

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.

Problem

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.

Original source