2

フィールドセットを次のような形にしようとしています:

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

これまでの私の最善の試みは次のとおりです。 http://jsfiddle.net/VWfVZ/

私が抱えている問題は、それを正しく並べることができないことです。そうすると、フィールドセット内のコンテンツに応じてシフトするようです。私のcssを修正するのを手伝ってくれる人はいますか? それとも、フィールドセットを使用してこの形状を目指すのをやめるべきですか?

4

1 に答える 1

2

これが私の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;
}

フォーム要素を中に配置するだけです。または、テキストをフィドルと同じ場所に配置する必要がありますか?

于 2013-05-02T23:43:47.040 に答える