按鈕在表格單元的角落;文本在中心

Question

我想用單詞的每個單元格製作5x5網格。但是每個單元在每個角落都有一個按鈕。我做它的形象：

我真的不知道如何做到這一點。我怎樣才能使這些「角落按鈕」與中心的文字？

<table> 
    <tr> 
    <td> 
     ?? 
    </td> 
    [..] 
    </tr> 
    [..] 
</table> 

Answer 1

我建議這是用CSS實現的無限容易。

這裏是一個非常快速的&簡單的我如何與一個盒子做例子..

<div class='box'> 
Tree 
<span class='tl_tri tri' onclick='whatever you want the button to do'></span> 
<span class='tr_tri tri' onclick='whatever you want the button to do'></span> 
<span class='bl_tri tri' onclick='whatever you want the button to do'></span> 
<span class='br_tri tri' onclick='whatever you want the button to do'></span> 
</div> 

CSS：

.box { 
    background: white; 
    border: 2px solid #000; 
    height:100px; 
    width: 100px; 
    position: relative; 
    text-align: center; 
    line-height:100px; 
    font-family: Arial; 
    font-size: 12pt; 
} 
.tri { 
    width: 0px; 
    height: 0px; 
    position: absolute; 
} 
.tl_tri { 
    border-right: 20px solid transparent; 
    border-top: 20px solid green; 
    top: 0px; 
    left: 0px; 
} 
.tr_tri { 
    border-left: 20px solid transparent; 
    border-top: 20px solid red; 
    top: 0px; 
    right: 0px; 
} 
.bl_tri { 
    border-right: 20px solid transparent; 
    border-bottom: 20px solid grey; 
    bottom: 0px; 
    left: 0px; 
} 
.br_tri { 
    border-left: 20px solid transparent; 
    border-bottom: 20px solid yellow; 
    bottom: 0px; 
    right: 0px; 
} 

這表現在這裏工作：

https://jsfiddle.net/0qtj0o0z/