Question

希望您能为我提供帮助。我正在尝试，但没有实现:(。

我想做出这种定位效果

我正在使用flex，但是当我尝试增加绿色div时，其他两个都在缩小尽管我在对角线类中设置了flex-shrink: 0; flex-grow: 1;以在绿色div中覆盖了flex: 0 0 1.5这样的flex，例如< / p>

我仍然像这样空白

这是我的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>

旋转中间伸缩列效果

1 个答案: