html - Is there any clean way to get a top-hat shape when using fieldsets with css? -


i'm trying fieldset have shape this:

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

here's best attempt far: http://jsfiddle.net/vwfvz/

the problems i'm having never can line correctly, , when do, seems shift around depending on content have inside fieldset. can me fix css? or should stop trying go shape using fieldset altogether?

here's one-element answer: 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; } 

just place form elements inside. or need text in same places fiddle?


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -