Style input field to look like a trapezium

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