CSS3 Skew encore! : Dénouer le texte sans div parent afin que l'état de mise en forme soit correct

Question

J'ai un problème simple, mais je demande peut-être l'impossible.

Je souhaite que mes éléments de formulaire html soient des parallélogrammes sans déformer le texte contenu. Je normalement le faire en appliquant la transformation à un div parent et l'application de la transformation inverse au contenu:

http://jsfiddle.net/ExUs9/3/

form { 
    background:#62CAD9; 
    padding:10px; 
} 
div { 
    background: white; 
    height: 30px; 
    margin: 10px; 
    width:300px; 
    transform:skewX(30deg); 
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg); 
} 
input { 
    background: none; 
    width: 100%; 
    height: 100%; 
    border: none; 
    transform:skewX(-30deg); 
    -ms-transform:skewX(-30deg); 
    -webkit-transform:skewX(-30deg); 
} 

Mon problème avec ce qui précède est la propriété de mise au point est toujours appliqué à l'entrée unskewed boîte et affiche comme rectangulaire. L'effet de mise au point est seulement biaisé si la boîte d'entrée lui-même est biaisé:

http://jsfiddle.net/kdqKX/

form { 
    background:#62CAD9; 
} 

input { 
    margin: 20px; 
    background: white; 
    width:300px; 
    border: none; 
    height: 30px; 
    transform:skewX(30deg); 
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg); 
} 

Le problème ici est que le texte est biaisé.

Je sais que je pourrais simplement supprimer les grandes lignes de mise au point, mais est-il un moyen soit:

1. Incliner la boîte d'entrée - mais pas le texte contenu - sans biaiser par un parent div
2. Appliquer la bordure à la div parente lorsque la boîte de saisie enfant est mise au point

Je ne connais pas bien js ou les scripts, donc une solution sans script est préférable. Je crois, cependant, que c'est impossible en css pur, alors laissez-moi savoir toutes les solutions possibles.

Merci, vous génies Internet courageux,

Dalton

Answer 1

La solution facile serait une image de fond.
Le dégradé CSS peut fausser cela.

background-image:linear-gradient(45deg, #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px); 

Essayez sans transformer. http://jsfiddle.net/khGDj/ autre moyen facile, aurait été largeur pseudo-élément et frontières/bleu/transparent. entrée ne le prenez pas autant que je sache.