html - 旋转中间 flex 列效果

Question

我希望你能帮我做这个效果。我正在尝试，但我无法实现它:(。

我想做这个定位效果

我正在使用 flex，但是当我尝试增大绿色 div 时，其他两个正在缩小尽管我设置了 flex-shrink: 0; flex-grow: 1; 在对 Angular 线类中以绿色 div 覆盖 flex，例如 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 以隐藏旋转的 Angular 。

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