3

HTML と CSS を使い始めたばかりで、平行四辺形と動的なサイズ変更を含むデザインを作成したいと考えています。それぞれが上から始まり、25%、50%、75%、100% になり、重なり合う 4 つの平行四辺形が必要です。その結果、単一の平行四辺形のように見えますが、4 つのセクションがあります (これらには、サイトの他の部分にリンクするための a タグが付いています)。

これで、右マージンとスキューに対処するまでは問題ありません。このトリックが機能するには、各平行四辺形の右上が同じ場所にあり、同じ角度を下に向ける必要があります。残念ながら、右余白は平行四辺形の中心 (上ではない) から右端までの距離であるため、これは難しく、この尺度の固定距離または相対距離のどちらも機能しません。重要な問題は、右マージンが画面の垂直方向の高さの関数である必要があることです。これは JQuery で可能ですが、純粋な HTML または CSS ソリューションを試してみたいと思います。

コード

この問題を示す基本的なコードを次に示します。

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        html,
        body { 
                height:100%;
                width:100%; }
        div.parallelogram {
                position:absolute;
                top:0;
                right:0;
                -moz-transform:skew(-20deg);
                -o-transform:skew(-20deg);
                -webkit-transform: skew(-20deg); }
        div#parallelogram1 {
                height:100%;
                width:20%;
                background-color:#AAA;
                z-index:10; margin-right:100px; }
        div#parallelogram2 {
                height:50%;
                width:20%;
                background-color:#CCC;
                z-index:20;
                margin-right:55px; }
    </style>
</head>
<body>
<div class="parallelogram" id="parallelogram1"></div>
<div class="parallelogram" id="parallelogram2"></div>
</body>

2 つの平行四辺形を並べたままにして、サイズに関係なく画面を垂直に埋めることができる場合 (水平方向のサイズ変更にそれほどこだわらず、ページの右側にハングアップさせます。これで十分です)私が望んでいる効果）、あなたはヒーローです.

個人的には、次の 3 つの可能性が考えられます。

  1. これを適切な右マージン、幅、高さ、および傾斜の組み合わせだけで機能させる驚くべき方法
  2. 各平行四辺形をコンテナ内に配置し、完全にコンテナ内に留まらなければならないことを伝えます。
  3. ジグソー - 水平バーを作成し、各サイズの白い平行四辺形と重ねて、目的の形状を作成します。私はこれを機能させることができましたが、より簡単な解決策を作りたいと思っています。実際に平行四辺形を何かの前に置きたい場合、この手法は面倒です。
4

1 に答える 1

2

編集:
3 つの平行四辺形を 1 つの親内にネストするだけで、はるかに簡単になります。これは、説明したシナリオの完全なソリューションです。

http://jsbin.com/omoreb/1/edit

または、入れ子になった平行四辺形を相対的に配置したくない場合は、絶対に配置できますが、それぞれの高さを指定する必要があります。その中のアンカー要素ごとに margin-top を指定します。この解決策はうまくいくと思います。

于 2013-04-28T20:57:24.890 に答える