html - 如何创建覆盖纸(桩)- CSS/HTML

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>