CSS form diagonally without warping the letter together

Question

CSS form diagonally without warping the letter together

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Hello, I need to make a diagonal form. But the letters of the form are crooked together "search the store". Can anyone solve this with CSS?

HTMLUsed

<divid="search" class="col-xs-10 search search-form" style="padding-right: 0px;">
        <input class="form" type="search" placeholder="Buscar na loja" name="palavra_busca" style="padding-top: 0px; height: 37px;">     
</div>

CSS Used

#search{
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-o-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);  
}

css

asked by anonymous 03.09.2015 / 15:11

2 answers

0

What you can do is give an id or a class to the text and modify it according to what you need. Thats the only thing missing . With the class form it modifies the a font. I think that's what you need.

Any questions, I'll help.

03.09.2015 / 15:34

PHP Upload ajax of miscellaneous files without submit [duplicate] Instantiation of class

score 1 · Accepted Answer

You have to do the same effect, but unlike in the field that is inside. For it to be straight.

#search{
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-o-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);  
}

#search input{
-moz-transform: skewX(40deg);
-webkit-transform: skewX(40deg);
-o-transform: skewX(40deg);
-ms-transform: skewX(40deg);
transform: skewX(40deg);  
}