3

真っ直ぐではなく、上部のヘッダーセクションが斜めに見えるWebページを作成するための最良の方法（html、css、およびグラフィックスを使用）は何でしょうか？例として、以下の画像を参照してください。

代替テキスト

さまざまなブラウザのサイズ/解像度に応じて拡大/縮小するような方法で画像を使用する方法がわかりません...

誰かが私に助けを提供できますか？または、おそらく私にリソースを教えてください。

ありがとう！

4

5 に答える 5

4

を使用できますborder-radius。

例

jsFiddle の例を参照してください。

于 2011-01-24T02:02:15.307 に答える
2

私のは@Alexのよりクリーンなバージョンです：

ライブデモ

.head {
    -webkit-border-top-left-radius: 40% 80px;
    -webkit-border-top-right-radius: 40% 80px;
    -moz-border-radius-topleft: 40% 80px;
    -moz-border-radius-topright: 40% 80px;
    border-top-left-radius: 40% 80px;
    border-top-right-radius: 40% 80px;

    background: blue;
    height: 280px
}
<div class="head"></div>

明らかに IE では動作しません。

于 2011-01-24T02:15:30.097 に答える
1

CSS3 または Webkit 固有のプロパティを使用できますが、ブラウザー間の互換性に関する限り、これは十分にサポートされていません。できるだけ多くのブラウザーをサポートしたい場合は、背景画像を使用してこの効果を実現することをお勧めします。

于 2011-01-24T02:55:57.647 に答える
0

これは、jquery を使用して作成したクロスブラウザー バージョンです。基本的に、スクリプトは、背景が白で幅が減少する多数のスパンを作成します。

結果を変更する変数をSTEPSいじることができます。FACTORステップ関数は曲線のイージングを設定します。後で私よりも優れた機能に置き換えることができますが、これは単なる例です。

var STEPS = 53;
var FACTOR = 5;

var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
    tmpWidth = stepWidth(i, width);
    $span.clone().css({
        'bottom': i + 'px',
        'width': tmpWidth,
        'left': (width - tmpWidth)/2
    }).appendTo($el);

}
function stepWidth(i, width){
    return -(1 / FACTOR * Math.pow(i, 2)) + width;
}

代替テキスト

コード全体を見つけることができます（Fiddleの html + css ）

于 2011-01-24T03:48:05.460 に答える