Home/ Questions/Q 9147223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T10:56:08+00:00

I am attempting to recreate these two content boxes stacked ontop of one another

  • 0

I am attempting to recreate these two content boxes stacked ontop of one another without images – https://i.stack.imgur.com/oiINW.png is this possible or would an image have to be used for the lower box?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It can be reproduced really well, with minimal markup in… well, almost any browser, really. I did two versions, the HTML for both is the same.

    <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>

    The first version uses CSS 3D transforms and should work in Safari, Chrome, Firefox and IE10. Opera and IE9 (and older) don’t support 3D transforms, so it won’t work for those.

    demo

    Relevant 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: '';
}

    The second version is the better compatibility one and should work fully (shadows + emulate 3D effect) in Chrome, Safari, Firefox, IE9+ and Opera. The 3D effect should also be emulated in IE8, even if the shadows won’t be there.

    demo

    Relevant 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: '';
}

    You could go overboard and try to emulate shadows for IE8/ 3D effect and shadows for IE7 using additional elements instead of pseudo-elements and applying matrix transform/ shadow filters on those, but I think it’s not worth it.

    • 0