Search code examples
jquerycsscellcss-tablesdiagonal

Create diagonal border of a cell

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

enter image description here

Any ideas will be appreciated.

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.