Question

HTML:

<div class="entry-wrapper">
<div class="entry-paper"></div>
some content goes here
</div>

CSS:

.entry-wrapper {
    background: white;
    margin: 0 0 1.625em;
    padding: 1.625em;
    position: relative;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.entry-paper {
    background: white;
    height: 100%;
    width: 99%;
    position: absolute;
    left: 2px;
    top: 3px;
    z-index: -1;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

.entry-paper::before, .entry-paper::after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: 2px;
    background: red;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    z-index: -1;
}

.entry-paper::after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

I need red blocks to be positioned under the .entry-paper block. And here is the link, guys – http://layot.prestatrend.com/?page_id=2 Can’t figured out how to do that. Any help please?

Answer 1

If the goal is to display the red blocks underneath both .entry-wrapper and .entry-paper:

• Change: .entry-paper:: to .entry-wrapper:
• Change the z-index for .entry-wrapper:before, .entry-wrapper:after to -2 (any value less than the z-index for .entry-paper)
• Adjust the bottom value for .entry-wrapper:before, .entry-wrapper:after (perhaps to -3px or so)

jsfiddle demo

Edit 1:

It didn’t seem to be causing any harm, but the :: for before and after should be changed to :. Apparently the browsers ignored the extra :, but it might cause trouble at some point.