显示以倾斜矩形为中心的文本框

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/，但我确定你没有找到足够的;）谷歌是你的朋友

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部分，它非常明确，有一个包含四个输入的容器。

在CSS文件中，我将图像设置在具有固定宽度和高度的容器的背景中。 然后我为输入创建了四个id，其中属性position设置为absolute。

绝对属性允许您设置元素的位置作为父元素的引用，这里是<div id="background">。 因此，既然您知道它的大小，您可以使用margin prooperty来定位元素。

希望它有所帮助。