样式输入字段看起来像梯形

Question

我正在尝试为客户端创建自定义样式的文本字段。

他们想要一个梯形输入字段。

这是我到目前为止所做的：

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

小提琴

关于如何或是否可以进行以下操作的任何想法： 。

Answer 1

像这样：

<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/

输入本身对形状没有贡献。只是这两个跨度。您可以将输入元素本身用于内部形状，但是由于无论如何都需要添加标记，我想您也可以添加两个“通用”梯形辅助形状，并且保持输入元素不变。

您将需要两个伪造边界。这是必需的，因为形状本身是通过添加边框创建的，因此可见边框是通过将稍小的形状叠加到另一个上来构造的。

其余的是带有负边距的技巧，以允许将内部形状放置在外部形状的边界上。并且当然transparent用作颜色，以防止内部形状的“负空间”覆盖外部形状。