divと入力にCSSが付いた曲線

Question

これだけのCSSを作成することはできますか？

は、私は、これはこれが可能であるが、それは入力フィールドでも可能であると思いますか？

Answer 1

あなたはborder-radiusプロパティを使用して、似たような

スニペットここFiddle作業

.container{ 
 
    border-radius:5%/100px 100px 100px 100px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid; 
 
}

<input class="container" />

を作ることができます。 border-radius割合を変更し、ちょうどCSSのでは不可能であるUIの変更

Answer 2

をチェックしていますが、横方向に湾曲線でSVG画像を作成する場合は、次のような何かを行うことができるより：あなたが共有する必要が

input { 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
} 
input::before { 
    background: url("curve-sx.svg") 
} 
input::after { 
    background: url("curve-dx.svg") 
}