html - 平行四边形文本框

Question

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

我正在使用下面的 CSS 向我的文本框添加倾斜:

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

文本框对齐也受到影响，我只是想让文本框垂直对齐。 (见下面的截图)

Answer 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);
}

(平行四边形是包裹输入框的div的id)

DEMO