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

Question

I'm trying to get a fieldset to have a shape something like this:

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

Here's my best attempt so far: http://jsfiddle.net/VWfVZ/

The problems I'm having is that I never can get it to line up correctly, and when I do, it seems to shift around depending on the content I have inside the fieldset. Can anyone help me fix my css? Or should I stop trying to go for this shape using a fieldset altogether?

Answer 1

这是我的单元素答案：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;
}

只需将表单元素放入其中。或者你需要文本和你的小提琴在同一个地方吗？