HTMLとCSSで曲線テキスト入力を行うにはどうしたらいいですか？

Question

私はPhotoShopで設計されたウェブサイトを作成するプロジェクトを持っています。背景やフォントに問題がない、あなたが見ることができるように

;：私はこのようになりますHTMLとCSSでテキストボックスに作成したいです問題はテキストボックスです。これらの曲線を使ってテキストボックスを作成するにはどうすればよいですか？

Answer 1

* { 
 
    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>

Answer 2

これは画像の形を取得する方法です。 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プロパティの4つの値は、時計回り左上隅から、個々の境界の半径を表します。