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

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

Fiddle

关于如何或是否有可能制作这样的东西的任何想法: .

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 作为颜色，以防止内部形状的“负空间”覆盖外部形状。