Эффект поворота средней гибкой колонны

Question

Я надеюсь, что вы можете помочь мне с этим эффектом.Я пытался, но не смог этого добиться :(.

Я хочу сделать эффект позиционирования

Я использую flex, но когда я пытаюсьувеличить зеленый div, остальные два уменьшаются Несмотря на то, что я установил flex-shrink: 0; flex-grow: 1; в классе диагоналей, чтобы переопределить в зеленом div гибкую как flex: 0 0 1.5, например,

Я все еще получаю пробелы, подобные этой

Вот мой HTML

<div class="full-height">
        <div class="diagonals">
            <div class="diagonal">
            </div>
            <div class="diagonal">
            </div>
            <div class="diagonal">
            </div>
        </div>
        <div class="footer">
            <img class="logo-image" src="{{asset('/landingImages/logo_landing.jpg')}}" alt="">
        </div>
    </div>

и мой scss

.full-height {
  height: 100vh;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: black;
}

.diagonals {
  height: 200%;
  width: 100%;
  display: flex;
}


.diagonal {
  height: 120%;
  background: greenyellow;
  flex:1;
  flex-shrink: 0;
  flex-grow: 1;
  background-position: center;
  &:nth-child(1) {
    background-image: url("/landingImages/gym.jpg")
  }
  &:nth-child(2) {
    transform: rotate(15deg) translateY(-8%) translateX(0%);
    background-image: url("/landingImages/gym3.jpg")
  }
  &:nth-child(3) {
    background-image: url("/landingImages/cycling-landing.jpg")
  }
  span.diagonal-text {
    text-shadow: 5px 1px #636b6f;
    color: white;
    font-weight: bold;
    font-size: 50px;
    position: absolute;  
    left: 30%;                      
    top: 40%;                   
  }
}

Я надеюсь, что вы можете помочь мне, кто яделаем неправильно. Заранее спасибо!

Answer 1

Изолированное решение работает с псевдоэлементами (:before или :after). Таким образом, вы получаете более четкое управление повернутым фоном по отношению к содержимому, которое не было повернуто.

Просто убедитесь, что повернутый псевдоэлемент достаточно большой, чтобы покрыть область, чтобы иллюзия была полной. Отрегулируйте значение scale в преобразовании и height этого элемента, чтобы скрыть повернутые углы.

.my-flex-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden; /* required to prevent overflow and scrollbars */
}
.flex-item {
  flex: 1 0 auto;
}
.the-one-that-rotates {
  position: relative;
  background: yellowgreen;
  max-width: 300px;
  flex-grow: 0;
}
.the-one-that-rotates:after {
  content: ''; /* pseudo element needs content property even if empty */
  position: absolute;
  background: yellowgreen; /* same background treatment (color or image) as .the-one-that-rotates */
  height: 130%; /* adjust this value to need */
  width: 100%;
  transform: rotate(15deg) scale(1.65); /* adjust these values to need */
  top: 0;
  left: 0;
  z-index: 9;
}
.stuff-inside {
  position: relative; /* position relative here is so that we can apply z-index to make sure the content is above the rotated background */
  color: white;
  padding: 20px;
  z-index: 10;
}
.unique-bkg {
  background-color: blue;
  background-image: url(https://picsum.photos/500);
  background-position: center center;
  background-size: cover;
}
.another-unique-bkg {
  background-color: red;
  background-image: url(https://picsum.photos/550);
  background-position: center center;
  background-size: cover;
}

<div class="my-flex-wrapper">
  <div class="flex-item unique-bkg">
    <!-- the blue side -->
  </div>
  <div class="flex-item the-one-that-rotates">
    <div class="stuff-inside">
      <h2>Some stuff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla eros porta, ornare elit sit amet, finibus felis. Integer condimentum, nisl elementum pellentesque euismod, tellus turpis varius magna, a congue odio magna et magna. Phasellus posuere ipsum quis lectus faucibus blandit. In eu lacinia tellus, id suscipit tellus. Duis ac enim viverra ligula hendrerit varius nec eget dui. Nulla sit amet accumsan leo. Suspendisse eget erat posuere, imperdiet erat quis, tincidunt velit.</p>
    </div>
  </div>
  <div class="flex-item another-unique-bkg">
    <!-- the red side -->
  </div>
</div>