Flexbox с тремя фоновыми изображениями по центру в одном месте? - PullRequest
Новая
       14

Flexbox с тремя фоновыми изображениями по центру в одном месте?

0 голосов
/ 25 ноября 2018

Возможно ли при использовании Flexbox иметь три элемента div с одним и тем же фоновым изображением, а два из них поворачиваются, как показано на рисунке?

На рисунке показан мой старый черновик веб-сайта, но я собиралсяпо-старому, чтобы получить этот результат.Теперь я хотел бы попробовать использовать только flexbox.Причина, по которой я хочу, чтобы они представляли собой три отдельных элемента, заключается в том, что я хочу иметь возможность накладывать на них тень от рамки, фактически не обновляя сами исходные изображения.

Еще одна проблема, с которой я столкнулся, заключается в том, что им нужнодля расширения вместе, поэтому два из paper_sheets должны изменить свой размер в зависимости от верхнего листа, который содержит информацию о странице, как вы можете видеть на изображении.

enter image description here

1 Ответ

0 голосов
/ 26 ноября 2018

Попробуйте это 

<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>
...