平行四边形文本框

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

（parallelogram是包裹在输入框周围的div的id）

DEMO