Question

任何人都可以给我任何想法，如何实现一个尖锐的html输入。

这样的事情：

从：

 ________
|________|

要：

 _______
<_______>

Answer 1

以下是我对adaam工作的贡献。我现在右箭头适合输入框的右侧并使它们更好地对齐。

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

您可以尝试this之类的内容。在输入框的两侧放置一个div并将其形成三角形。

Answer 3

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

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

带有锐边的html输入

3 个答案: