如何创建重叠论文(桩) - CSS/HTML

Question

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

正如您在内容底部看到的那样,看起来有3篇论文"相互趴在一起"

怎么能得到这个？

Answer 1

使用纯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>