Parallelogram Textbox

Question

Как создать тип параллелограмм текстового поля, где текст будет выровнен по вертикали.

Я использую CSS ниже, чтобы добавить перекос в мой Textbox: выравнивание

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

Textbox также повлияло, я просто хочу, чтобы текстовое поле вертикально. (См рисунок ниже)

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 обернута вокруг ввода)

DEMO