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

我想为客户端创建一个自定义样式的文本字段。样式输入字段看起来像一个梯形

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

这是我做了什么至今：

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

任何想法如何或是否有可能做这样的事情： this 。

来源

2013-10-21 Newtt

将您的输入字段放在图形上并用css隐藏输入字段的边框 – Alexxus

事情是这样的：

<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-21 08:02:45 GolezTrol

客户再次变得复杂！

我建议你使用背景图像在外部透明的梯形的CSS所以一个PNG。稍微增加页边空间，以免用户在梯形外写字。

希望这有助于

来源

2013-10-21 07:43:09

这就是我最初想要做的。我可能最终会回到这个。谢谢！ – Newtt

你这里有两种选择

CSS3
图片作为背景。

对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-21 07:47:11

这会创建一个实心的梯形而不是梯形的轮廓。 – GolezTrol

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

回答

相关问题