html input with sharp edges - html

Question

Can anyone give me any ideas how to achieve a html input that has pointed edge on it.
Something like this:
from:
________
|________|
To:
_______
<_______>

Answer 1

Below are my contributions to adaam's work. I have the right arrow now fitting on the right side of the input box and aligned them a bit better.
HTML:
<div class="sharp"><input type="text" value="test"/></div>
CSS:
input[type="text"] {
width: 140px;
}
div.sharp {
height:30px;
width:133px;
position:relative;
margin:0 30px;
}
div.sharp:before {
content: "";
position: absolute;
top: 1px;
left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 0;
border-color: transparent #000 transparent transparent;
line-height: 0px;
_border-color: #000000 #000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div.sharp:after {
content:"";
position: absolute;
top: 1px;
right: -30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #000;
line-height: 0px;
_border-color: #000000 #000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
http://jsfiddle.net/P89WD/9/

Answer 2

You could try something like this. Put a div on either side of the input box and form it into a triangle.

Answer 3

I have achieved it through multiple images in input
input.yourClassname {
border-bottom: 1px solid #7e8ba4;
background-image: url(../css/images/inputBorderLeft.png), url(../css/images/inputBorderLeft.png);
background-repeat: no-repeat;
background-position: bottom left, bottom right;
}