平行四边形文本框

如何创建平行四边形类型的文本框，其中文本将垂直对齐。平行四边形文本框

我使用CSS下方偏斜添加到我的文本框：

#parallelogram { 
    margin: 0 0 0 20px; 
    -webkit-transform: skew(30deg); 
     -moz-transform: skew(30deg); 
     -o-transform: skew(30deg); 
}

文本框对齐也受到影响，我只想做垂直对齐文本框。（见下图）

enter image description here

来源

2014-02-18 lexeRoy

这个问题似乎是相似的：http://stackoverflow.com/questions/16910275/css3-skew-再次unskew文本没有父母div所以形式焦点状态是正确的/见http://jsfiddle.net/khGDj/1/（点击/专注于输入绘制边界） –

你可以试着给予倾斜转变为您的文本框的父，并移除文本框的边框（和轮廓），让你键入的文本具有适当的垂直对齐。

#parallelogram { 
    border:1px solid black; 
    display:inline-block; 
    margin: 0 0 0 20px; 
    padding: 0 3px 0 3px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
} 
#parallelogram input { 
    outline: none; 
    border: none; 
    -webkit-transform: skew(-30deg); //setting the net skew angle to 0 
    -moz-transform: skew(-30deg); 
    -o-transform: skew(-30deg); 
}

（parallelogram是div周围的输入框中输入包裹ID）

DEMO

来源

2014-02-18 05:40:21 tewathia

平行四边形文本框

回答

相关问题