Создать диагональную границу ячейки

Интересно, возможно ли даже создание таблицы с диагональной границей, используя css или jquery, как показано ниже:

Любые идеи будут оценены.

Ответ 1

Все возможно, если вы достаточно долго обходите с ним, вот пример использования некоторых креативных границ и большого количества CSS:

.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: 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

или вы можете просто использовать изображение в качестве фона для своей таблицы.

Ответ 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;}                  
</style>

  <table>
    <tr>
      <td> 
    <div class = "tag1">Tag1</div>
    <div class="tag2">Tag2</div>

        <div style="z-index:-1;">
           <div class="diag">
             <div class="outerdivslant borderdraw">
             </div>

           <div class = "innerdivslant borderdraw">
           </div>
         </div>
        </div>

      </td>
    </tr>
</table>

А вот вывод.

Надеюсь, что это поможет.

Ответ 3

Границы таблицы не могут быть диагональны, вы просто можете попытаться использовать элемент (div) с одной границей и повернуть его (если css3 в порядке)