3

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

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

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

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

小提琴

关于如何或是否有可能做出这样的事情的任何想法：这个.

4

3 回答 3

6

像这样的东西：

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

于 2013-10-21T08:02:45.317 回答
1

客户再次变得复杂！

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

希望这可以帮助

于 2013-10-21T07:43:09.583 回答
0

你在这里有两个选择

  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 的后备。

于 2013-10-21T07:47:11.227 回答