6

下の画像に似たものを構築しようとしています。

コンテナーは 100% の幅で、ヘッダーは固定の高さですが、本体の高さは動的です。

「Body」divに次のことを行うことで、私が望むものをほとんど得ることができました

border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-moz-border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 15px 15px 0 0;

理論的には、「ヘッダー」divを湾曲させ、ボディを下に配置したいと考えていますが、それは可能だとは思いません(ヘッダーには塗りつぶされた画像が含まれます)

編集：言及するのを忘れました。上記のコードをmargin-top:-15px下部の div に追加すると、Firefox と IE では機能しましたが、Chrome と Safari では機能しませんでした。マップとスライダーは引き続きヘッダー div に移動し、途切れることはありませんでした。

EDIT 2 http://jsfiddle.net/ShKNu/4/

↑現在はこんな感じです。ご覧のとおり、マップはカーブで途切れることなく、すぐにヘッダーに入ります。

ここに画像の説明を入力

4

2 に答える 2

2

あなたは正しい方向に向かっていた

「ボディ」または.mainセクションに曲線を配置しoverflow: hidden、ネガを付けるmargin-topことは良い方法です。サード パーティのコンテンツに関する問題を解決するにはposition: absolute、..mainposition: relative

これは、配置されたコンテンツと配置されていないコンテンツの両方を含むフィドルです.main（注：デモンストレーション用に曲線を少し調整して、より目立つようにしました）。

IE9+、Chrome、および FF で正常にテストされます。明らかに、ヘッダーまたは外部の他の場所に配置されているサードパーティのコンテンツは、.main必ずしも非表示になるとは限りませんが、それは予想されるはずです. それでも、このフィドルrelativeが示すように、適切な配置 ( ) と z-indexing (mainより大きいheader) を設定することで回避できます。

于 2013-07-14T03:19:25.267 に答える
0

margin:-20pxまたは別の測定値を使用してみてください。

于 2013-07-14T00:56:04.257 に答える