創建一個細胞

的對角線邊框不知，甚至有可能使用CSS或jQuery的，就像下面創建與對角線邊界線表：創建一個細胞

enter image description here

任何想法將不勝感激。

2013-03-31 Henry Gunawan

任何事情都是有可能的，如果你擺弄它足夠長的時間，下面是使用一些有創意的邊框和大量的CSS的例子：

而另一個使用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

或者您可以使用圖像作爲表格的背景。

來源

2013-03-31 08:45:31 adeneo

好吧，看起來不錯。但實際上，這應該與文本以某種方式使用（房間類型，款待）。 +它應該與IE瀏覽器正常工作。 – dfsq

如何將這個應用於表格而不是div？ – Eli

問題在於，在任何地方都沒有簡單的跨瀏覽器工作方式來執行此操作，因此您需要做大量工作才能使其適合您的需求。唯一簡單的解決方案是使用圖像作爲背景。 – adeneo

表格邊框不能對角線，你只可以嘗試（格）有一個邊框的元素，將其旋轉（如果CSS3是確定）

來源

2013-03-31 08:19:43 bukart

正式表不能有對角線邊框卻收效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>

而這裏的輸出。

enter image description here

希望它能幫助。

來源

2013-03-31 08:57:48 GeekyCoder

我剛剛創建了這個，你可以根據你的需要來設置它。這是這種風格可以實現的方式之一。 – GeekyCoder

創建一個細胞

回答

相關問題