Question

他们的任何人都可以帮助我创造这种效果：

正如您在内容底部看到的，看起来有3篇论文“互相说谎”

如何获得？

Answer 1

<强> Overlayed Papers Demo with pure css/html

使用的代码：

<style>

  #paper{
    position:relative;
    margin:0 auto;
    background:#fff;
    border:2px solid #ccc;
    width:380px;
    height:470px;
  }
  #paper_foo1, #paper_foo2{
    position:absolute;
    background:#fff;
    bottom:-8px;
    height:4px;
    width:370px;
    margin-left:3px;
    border-bottom:2px solid #ccc;
    border-left:2px solid #ccc;
    border-right:2px solid #ccc;
  }
  #paper_foo2{
    width:360px;
  }     
</style>


  <div id="paper">

    <div id="paper_foo1"><div id="paper_foo2"></div></div>
  </div>

Answer 2

如果你想要纯CSS / HTML，你可以做类似的事情：

<强> HTML

<div class="content">
    Content
    <div class="backpage"><div class="backpage"></div></div>
</div>

<强> CSS

.content {
    border: 1px solid #aaa;
    background-color: white;
    position: relative;
}

.backpage {
    z-index: -1;
    border: 1px solid #aaa;
    background-color: white;
    height: 100%;
    position: absolute;
    bottom: -2px;
    left: 5px;
    right: 5px;
}

我实际上没有测试过，但它应该给你类似的东西。我更喜欢动态的东西，但是......

Answer 3

在这里：http://jsfiddle.net/gHKh4/7/

只需使用CSS即可随心所欲地使用它。

预览：

Preview of Paper 3D effect

HTML：

<body>
<div id="content">
    <h2><strong>Main window</strong></h2>
    <p>My content</p>
</div>
<div id="footer1">
</div>
<div id="footer2">
</div>

</body>

CSS：

body {
    padding: 20px;
    background: #ccc;
}

#content, #footer1, #footer2 {
    margin: 0px auto;
    background: #fafafa;
    border: 1px solid #aaa;
}

#content {
    width: 80%;
    border-radius: 3px;
    padding: 4px;
 }

#footer1 {
    width: 79%;
}


#footer2 {
    width: 78%;
}

#footer1, #footer2 {
    height: 3px;
    border-top-width: 0px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

Answer 4

我建议在css中使用背景图片来查看您的内容。我对其他建议持开放态度。

HTML：

 <div class="myDiv">
     <!-- content here -->
 </div>

CSS：

 .myDiv {
     background-image: url('threepapers.png');
 }

我会使用PNG作为背景图片，因为它允许透明度

Answer 5

虽然，这个问题已经得到解答，但我认为这个解决方案对某些人来说可能很有意思。 HTML中只有一个div，所有内容都由CSS和伪元素完成。

HTML：

<div class="page"></div>

CSS：

.page {
    position: relative;
    width: 600px;
    height: 200px;
    background: white;
    border-style: solid;
    border-color: #888;
    border-width: 2px;
}
.page:before {
    position: absolute;
    content: " ";
    width: 560px;
    height: 4px;
    left: 18px;
    top: 200px;
    border-style: solid;
    border-color: transparent #888 #888 #888;
    border-width: 2px;
}
.page:after {
    position: absolute;
    content: " ";
    width: 520px;
    height: 4px;
    left: 38px;
    top: 206px;
    border-style: solid;
    border-color: transparent #888 #888 #888;
    border-width: 2px;
}

http://jsfiddle.net/6zTu9/

如何创建重叠论文（桩） - CSS / HTML

5 个答案: