Flexbox的三个背景图片位于同一位置？

Question

使用Flexbox时是否可以使三个div具有相同的背景图像，并且其中两个像图像显示一样旋转？

该图显示了我的网站的旧草稿，但为了获得该结果，我正在采用旧的方法。现在，我想尝试仅使用flexbox。我希望它们成为三个单独的div的原因是，我希望能够在它们上放置盒形阴影，而无需实际更新原始图像本身。

我面临的另一个问题是它们需要一起扩展，因此其中两个paper_sheets需要根据包含页面信息的顶层纸张来更改其大小，就像您在图像上看到的一样。

Answer 1

尝试一下

<style>
  main {
    align-items: flex-start;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    height: 480px;
    width: 480px;  
  }
  aside, section {
    padding: 0 1em;
  }
  aside, section, section:before, section:after {
    background: beige;
    border: 1px solid;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  }
  section {
    height: 260px;
    position: relative;
    width: 260px;
  }
  section:after,
  section:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
  section:after {
    filter: brightness(0.8);
    transform: rotate(3.6deg);
  }
  section:before {
    filter: brightness(0.9);
    transform: rotate(-3.6deg);
  }
  h1, h2, h3, h4, h5, h6, p {
    margin: 1em 0;
  }
</style>

<main>
  <section>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </section>
  <aside>
    <h4>Lorem ipsum</h4>
    <p>Lorem ipsum</p>
  </aside>
</main>