css - 具有三个背景图像并居中于同一位置的 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>