曲線與CSS divs和輸入

Question

是否有可能創建這樣的事情只有用CSS？

我覺得這個是這樣的可能，但是否也可以輸入字段？

Answer 1

您可以使用類似的東西在這裏border-radius財產

片段

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

<input class="container" />

工作Fiddle。更改border-radius百分比，並檢查UI變化

Answer 2

那是不可能的只是CSS，但如果你與橫向弧形線條創建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") 
}