Style input field to look like a trapezium - html

Question

I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .

Answer 1

Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.

Answer 2

Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps

Answer 3

You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.