平行四邊形文本框

如何創建平行四邊形類型的文本框，其中文本將垂直對齊。平行四邊形文本框

我使用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

平行四邊形文本框

回答

相關問題