Crea bordo diagonale di una cella

Question

Mi chiedo se è possibile anche la creazione di un tavolo con la linea di bordo diagonale usando css o jquery proprio come di seguito:

Tutte le idee saranno apprezzate.

Answer 1

Tutto è possibile se si giocherellare con esso abbastanza a lungo , ecco un esempio utilizzando alcuni confini creativi e un sacco di CSS:

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

FIDDLE

e un altro con CSS3 rotazione:

-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

o si può solo usare un'immagine come sfondo per la vostra tavola.

Answer 2

bordi della tabella non possono essere diagonale, basta potrebbe provare ad utilizzare un elemento (div) con una frontiera e ruotarlo (se CSS3 è ok)

Answer 3

Ufficialmente una tabella non possono avere bordi diagonali, ma con piccoli trucchi CSS si possono fare apparire così, Ecco il codice ..

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

Ed ecco l'output.

Speranza che aiuta.