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.