有沒有任何干淨的方式來獲得與css使用fieldset時的禮帽形狀？

我試圖讓一個字段有一個形狀像這樣：有沒有任何干淨的方式來獲得與css使用fieldset時的禮帽形狀？

 /-----------\ 
     |   | 
     |   | 
     |   | 
    ____/   \____ 
/     \ 
|      | 
|      | 
\_____________________/

這裏是到目前爲止我最好的嘗試：http://jsfiddle.net/VWfVZ/

我遇到的一個問題是，我從來沒有能夠得到它排列正確，當我這樣做時，它似乎轉移取決於我在場內的內容。任何人都可以幫我修復我的CSS？或者我應該停止嘗試使用字段集完成這個形狀？

來源

2013-05-02 Uncle Iroh

嗯，我想最重要的問題是 - 它實際上是否是一種形式？（我仔細檢查，因爲你的jsfiddle中沒有輸入。） – ngm 2013-05-02 17:09:54

是的，表單數據將在裏面。 – 2013-05-02 17:10:35

簡單的問題在這裏，但爲什麼？你不能只使用一個容器'div'和css'background-image'？ – MTCoster 2013-05-02 19:18:07

這是我的一個元素答案：http://jsfiddle.net/VWfVZ/29/

.hat { 
position: relative; 
background: none; 
border: 1px solid #333; 
width:300px; 
height:50px; 
margin-top:200px; 
border-radius:15px; 
} 
.hat:after { 
bottom: 100%; 
content:" "; 
position: absolute; 
pointer-events: none; 
width:220px; 
height:100px; 
border-top: 1px solid #333; 
border-left: 1px solid #333; 
border-right: 1px solid #333; 
border-bottom: 1px solid #fff; 
left: 35px; 
border-radius:25px 25px 0 0; 
}

只要將裏面的表單元素。或者你需要文本與你的小提琴在相同的地方？

來源

2013-05-02 23:43:47 invot

對於三個元素：http://jsfiddle.net/ryNrk/ – invot 2013-05-02 23:59:37

你絕對釘住了形狀，但是我的目標是在帽子的頂部以及底部獲得一些表單元素。 +1雖然努力。我很感激。 – 2013-05-03 16:07:27

實際上，這樣可以得到很接近我所希望的東西，因爲我可以將帽子內的表單元素浮起來。 – 2013-05-03 16:15:12

有沒有任何干淨的方式來獲得與css使用fieldset時的禮帽形狀？

回答

相關問題