0

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);
}

我需要将红色块放置在 .entry-paper 块下。这是链接，伙计们 - http://layot.prestatrend.com/?page_id=2不知道该怎么做。请问有什么帮助吗？

4

1 回答 1

1

如果目标是在 .entry-wrapper 和 .entry-paper 下方显示红色块：

  • 改变：.entry-paper::到.entry-wrapper:
  • 将 z-index 更改为.entry-wrapper:before, .entry-wrapper:after-2（任何小于 z-index 的值.entry-paper）
  • 调整底部值.entry-wrapper:before, .entry-wrapper:after（可能为 -3px 左右）

jsfiddle 演示

编辑1：

它似乎没有造成任何伤害，但::forbefore和after应该改为:. 显然浏览器忽略了 extra :，但它可能会在某些时候造成麻烦。

于 2012-07-01T14:50:14.540 回答