歪んだ四角形の中央にテキストボックスを表示する

Question

下の画像の色付きボックスのそれぞれに、中央のテキストボックスを配置するにはどうすればよいですか？

更新：要望通り、私は恥ずかしい試みを追加しています。私はそれが悪いことを知っていますが、私はデザインをしていないので、私は紛失しています。

p.s.ダウン投票に感謝！

http://jsfiddle.net/Zrhe3/

table{width: 585px; height: 585px; background-image: url('http://i.stack.imgur.com/uknk9.png');} 
input{background-color: transparent; width: 100%; border-style:none; font-size: 32px;} 

<table> 
    <tr> 
     <td></td> 
     <td valign="bottom" align="center"><input type="number" id="number" value="1" /></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td align="right"><input type="number" id="number" value="2" /></td> 
     <td></td> 
     <td align="left"><input type="number" id="number" value="3" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td valign="top" align="center"><input type="number" id="number" value="4" /></td> 
     <td></td> 
    </tr> 
</table>​ 

Answer 1

あなたはここにhttp://jsfiddle.net/ZC2bd/46/以上の解決策を見つけることができますが、私はあなたが十分のために見ていないと確信している、Googleはあなたの友達です）

HTML：

<div id="background"> 
    <input id="top" type="text" /> 
    <input id="left" type="text" /> 
    <input id="right" type="text" /> 
    <input id="bottom" type="text" /> 
</div> 

CSS：

div#background{ 
    display: block; 
    width: 597px; 
    height: 597px; 
    background-image: url('http://i.stack.imgur.com/uknk9.png'); 
} 
#top{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 135px 0 0 224px; 
} 
#left{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 290px 0 0 70px; 
} 
#right{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 290px 0 0 380px; 
} 
#bottom{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 435px 0 0 230px; 
}​ 

HTML部分については、かなり明示的ですが、4つの入力を含む1つのコンテナがあります。

CSSファイルでは、固定幅と高さのコンテナの背景にイメージを設定しました。 次に、入力のためにID：positionをabsoluteに設定して4つのIDを作成しました。

絶対属性を使用すると、親要素、ここでは<div id="background">を参照して要素の位置を設定できます。 そのサイズを知っているので、marginプロポーザルで要素を配置することができます。

希望します。