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をに変更する必要があります:。どうやらブラウザは余分なものを無視した:ようですが、ある時点で問題が発生する可能性があります。

于 2012-07-01T14:50:14.540 に答える