无图像的3D内容盒 - 这可能吗？

Question

我正在尝试重新创建这两个没有图像叠加在一起的内容框 - http://i.imgur.com/j9O9j.png这是可能的，还是图像必须用于下方框？

Answer 1

它可以很好地复制，只需要很少的标记......好吧，几乎任何浏览器，真的。我做了两个版本，两者的 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>

第一个版本使用 CSS 3D转换，应该可以在Safari，Chrome，Firefox和IE10中使用。 Opera和IE9（及更早版本）不支持3D变换，因此它不适用于那些。

demo

相关的 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: '';
}

---

第二个版本是更好的兼容性，并且应该可以在Chrome，Safari，Firefox，IE9 +和Opera中完全运行（阴影+模拟3D效果）。即使阴影不在那里，也应该在IE8中模拟3D效果。

demo

相关的 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: '';
}

你可以过度使用附加元素而不是伪元素并尝试使用矩阵变换/阴影过滤器为IE7模拟IE8 / 3D效果和阴影的阴影，但我认为这不值得。

Answer 2

花了一段时间，但我认为我管理了（有点）你想要的东西。唯一不能做的就是侧面的“幻想”阴影。

这是fiddle

说明：

• 仅适用于Chrome和Safari！
• 仔细阅读this和this，分别了解perspective和perspective-origin。
• 申请自己的网站时需要进行调整！特别是定位。
• 阴影框需要为负z-index。这可能会干扰您自己的网站。我知道这不是最实用和最方便的方法，但它是最直接和最有效的方法。