当使用css字段集时，是否有任何干净的方法来获得礼帽形状?

Question

我想让一个字段集有一个形状像这样:

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

这是我目前为止最好的尝试:http://jsfiddle.net/VWfVZ/

我遇到的问题是，我永远不能让它正确排列，当我这样做时，它似乎根据我在字段集中的内容而改变。有人能帮我修复我的css吗?或者我应该停止尝试使用字段集来实现这种形状?

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;
}

把表单元素放在里面。或者你需要文本和你的小提琴在同一个地方吗?