1

画像なしで互いに積み重ねられたこれら 2 つのコンテンツ ボックスを再作成しようとしています - http://i.imgur.com/j9O9j.pngこれは可能ですか、それとも下部ボックスに画像を使用する必要がありますか

ここに画像の説明を入力

4

2 に答える 2

4

最小限のマークアップで、非常にうまく再現できます...まあ、ほとんどすべてのブラウザで、本当に。私は2つのバージョンを作成しましたが、両方のHTMLは同じです。

<div class='box box1'>
    <div class='box1-content'>Box 1 content goes here.</div>
</div>
<div class='box box2'>Box 2 content goes here.</div>

最初のバージョンはCSS3D変換を使用しており、Safari、Chrome、Firefox、IE10で動作するはずです。OperaとIE9（およびそれ以前）は3D変換をサポートしていないため、これらの変換では機能しません。

デモ

関連するCSS：

html { background: linear-gradient(#165284, #3672a4) no-repeat; }
.box { position: relative; margin: 0 auto; width: 90%; }
.box1-content, .box2 { box-sizing: border-box; padding: 1%; min-height: 16em; }
.box1 { z-index: 2; margin-bottom:  1.6em; box-shadow: 0 1.4em 1em -1em; }
.box1:before, .box1:after {
    position: absolute;
    z-index: -1;
    top: .5em; right: .6em; bottom: .5em; left: .6em; 
    border-radius: .35em;
    box-shadow: 0 0 2em;
    content: '';
}
.box1:before { transform: skewX(5deg); }
.box1:after { transform: skewX(-5deg); }
.box1-content {
    border-radius: 0 0 .5em .5em;
    background: linear-gradient(-45deg, #e14f00, #f88d00);
}
.box2 { z-index: 1; background: gainsboro; perspective: 32em; }
.box2:before {
    display: block;
    position: absolute;
    bottom: 100%; left: 0;
    width: 100%; height: 5em;
    transform: rotateX(45deg);
    transform-origin: 50% 100% 0;
    background: linear-gradient(dimgrey, silver);
    content: '';
}

2番目のバージョンは互換性が高く、Chrome、Safari、Firefox、IE9 +、Operaで完全に機能するはずです（シャドウ+ 3D効果をエミュレート）。影がない場合でも、3D効果はIE8でもエミュレートする必要があります。

デモ

関連するCSS：

html {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#165284',
            endColorstr='#3672a4', GradientType=0); /* fallback for IE9/8 */
    background: linear-gradient(#165284, #3672a4) no-repeat;
}
.box { position: relative; margin: 0 auto; width: 90%; }
.box1-content, .box2 { box-sizing: border-box; padding: 1%; min-height: 16em; }
.box1 {
    z-index: 2;
    margin-bottom:  1.6em;
    box-shadow: 0 1.4em 1em -1em; /* not supported in IE8 */
}
.box1:before, .box1:after {
    position: absolute;
    z-index: -1;
    top: .5em; right: .6em; bottom: .5em; left: .6em; 
    border-radius: .35em; /* not supported in IE8 */
    box-shadow: 0 0 2em; /* not supported in IE8 */
    content: '';
}
.box1:before { transform: skewX(5deg); } /* not supported in IE8 */
.box1:after { transform: skewX(-5deg); } /* not supported in IE8 */
.box1-content {
    border-radius: 0 0 .5em .5em;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e14f00',
            endColorstr='#f88d00', GradientType=1); /* fallback for IE9/8 */
    background: linear-gradient(-45deg, #e14f00, #f88d00);
}
.box2 { z-index: 1; background: gainsboro; }
.box2:before {
    position: absolute;
    bottom: 100%; right: 0; left: 0;
    border: solid 4em transparent;
    border-bottom: solid 5em silver;
    content: '';
}

船外に出て、IE8 / 3D効果のシャドウとIE7のシャドウを、疑似要素の代わりに追加の要素を使用してエミュレートし、それらにマトリックス変換/シャドウフィルターを適用してみることができますが、それだけの価値はないと思います。

于 2013-01-19T04:52:37.493 に答える
2

しばらく時間がかかりましたが、私はあなたが望んでいたものを（ある程度）管理したと思います. できない唯一のことは、側面の「派手な」影です。

ここにフィドルがあります

ノート：

  • Chrome と Safari でのみ動作します。
  • thisとthisを読んperspectiveで、perspective-originそれぞれを理解してください。
  • 独自の Web サイトに適用する場合は微調整が必​​要になります。特にポジショニング。
  • z-indexシャドーボックスにはネガが必要です。これは、自分のサイトに干渉する可能性があります。これが最も実用的で便利な方法ではないことはわかっていますが、最も簡単で効果的な方法です。
于 2012-08-26T20:47:36.810 に答える