如何在HTML和CSS中进行弯曲形式的文本输入？

Question

我有一个项目来创建一个用PhotoShop设计的网站。 我想在HTML和CSS中创建一个to文本框，如下所示：

如您所见，背景或字体没有问题。 问题是文本框。 如何使用这些曲线创建文本框？

Answer 1

这是在图像中获得形状的方法。 您将需要了解一些关于border-radius 。

以下是一个示例：

 div#test { border: thin solid #666; width: 8em; height: 2em; border-radius: 0 2em 0 2em; } 

 <div id="test">&nbsp;</div> 

border-radius属性负责圆角。 它可能非常复杂，但是这里简单的一项就可以了。 您只需要调整一些值。

在这四个值border-radius属性代表了个人的边界从左上角的半径， 顺时针方向旋转 。

Answer 2

 * { box-sizing: border-box; -moz-box-sizing: border-box; } div { background: #444; direction: rtl; width: 300px; padding: 20px; } label { width: 100%; color: #fff } input { border-radius: 0 2em; padding: 0 10px; width: 100%; border: none; line-height: 2em; margin-bottom: 20px; } textarea { border-radius: 0 4em; padding: 0 10px; width: 100%; border: none; line-height: 2em; margin-bottom: 20px; } input[type="submit"] { max-width: 100px; } 

 <div class="wrapper"> <label>Name</label> <input type="text" /> <label>Email</label> <input type="text" /> <label>Message</label> <textarea></textarea> <input type="submit" value="Submit" /> </div>