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

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

Answer 2

客户再次变得复杂！

我建议你使用背景图像在一个梯形的CSS中，外面是透明的，所以png。稍微设置边距，这样用户就不会在梯形外写字。

希望这有帮助

Answer 3

这里有两个选择

1. CSS3
2. 图片作为背景。

对于css3选项，请查看此链接http://css-tricks.com/examples/ShapesOfCSS/

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent;
border-right: 50px solid transparent; 
height: 0; width: 100px; 
}

但为了使其向后兼容，我建议你将图像作为背景作为css3的后备。