带锐边的html输入

有谁能给我一些想法，如何实现一个具有尖端的html输入

大概是这样的：

发件人：

致：

_______

您可以尝试以下方法。在输入框的两边各放一个div，并将其形成一个三角形。

下面是我对adaam工作的贡献。我现在在输入框的右侧安装了右箭头，并将它们对齐得更好

HTML:

---

我通过输入中的多个图像实现了它

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;
}

---

您最好的选择可能是使用背景图像或CSS3。通过将渐变语法与现有背景色相结合，通常可以创建边缘效果。另请参见。@ChrisKrycho我正是为了回答这个问题才开始这样做的，但我觉得有点无聊，所以其他人可以继续我刚才说的@阿达姆，我想我会试试你的作品，那很好。。现在我试着把箭头变成一个透明的、只有边界的箭头

 _______
<_______>

<div class="sharp"><input type="text" value="test"/></div>

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');
}

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;
}