Tworzenie przekątnej granicy komórki

Question

Zastanawiam się, czy możliwe jest nawet tworzenie tabeli z ukośną linię granicznego za pomocą CSS lub jquery jak poniżej:

Wszelkie pomysły będą mile widziane.

Answer 1

Wszystko jest możliwe, jeśli bawić się z nim na tyle długo, , oto przykład przy użyciu twórcze granice i wiele CSS:

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

FIDDLE

a drugi przy użyciu CSS3 naprzemiennie:

-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

lub można po prostu użyć obrazu jako tła dla tabeli.

Answer 2

obramowanie tabeli nie może być po przekątnej, po prostu mogą próbować używać elementu (div) z jednej granicy i obróć go (jeśli CSS3 jest ok)

Answer 3

Oficjalnie stół nie może mieć granic ukośne ale z niewielkim sztuczek CSS można sprawiają, że pojawiają się tak, oto kod ..

.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> 

A oto wyjście.

Nadzieję, że to pomaga.