html - CSS:translateY之间的空白

Question

我有包含transform: skew 和transform: translateY 的简单代码。我在使用此转换时遇到底部空白的问题。

我倾斜了 2 个 div，最后我用 translateY 移动，底部是我必须删除的空白。

当最后一个 div 未使用 translateY 转换时，空白位于最后一个和倒数第二个之间。

这只是例子，不是真实的网站。

.wrapper0 {
  padding: 200px;
  background: pink;
}

.skews {
  transform: translateY(-150px);
}

.wrapper1 {
  background: lightblue;
  transform: skew(0deg, 5deg);
}

.container1 {
  transform: skew(0deg, -5deg);
  padding: 50px;
}

.wrapper2 {
  background: red;
  transform: skew(0deg, 5deg);
}

.container2 {
  transform: skew(0deg, -5deg);
  padding: 50px;
}

.wrapper1, .wrapper2 {
  padding: 20px;
}

footer {
  position: relative;
  z-index: -1;
  transform: translateY(-300px);
  background: yellow;
  padding: 20px;
  padding-top: 200px;
}

 <div class="wrapper0">
            <div class="container0">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
              </p>
            </div>
          </div>
          
          <div class="skews">
              <div class="wrapper1">
                <div class="container1">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
                  </p>
                </div>
              </div>
                            
                  <div class="wrapper2">
                      <div class="container2">
                          <p>
                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
                          </p>
                      </div>
                  </div>
          </div>

<footer>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.</p>
</footer>

Answer 1

您的代码有点困惑。空闲的时候看看":after", ":before"，很有用。我尽可能地简化了您的代码。此外，我的 react 增加了。

body{
	margin: 0;
	padding: 0;
}
.wrapper0, .wrapper1, .wrapper2, footer {
	height: 200px;
    padding: 100px;
	position: relative;
	align-items: center;
  justify-content: center;
  display: flex;
}

.wrapper0 {
    z-index: 1;
}
.wrapper1 {
    z-index: 2;
}
.wrapper2 {
    z-index: 3;
}
footer {
    z-index: 1;
}
.wrapper0:before, .wrapper1:before, .wrapper2:before {
    left: 0;
    top: 0;

}
.wrapper0:before, .wrapper1:before, .wrapper2:before, footer:before {
	content: "";
    position: absolute;
    width: 100%;
    z-index: -1;
}
.wrapper0:before{
	background: pink;
	height: 500px;
}
.wrapper1:before, .wrapper2:before {
    transform: skew(0deg, 5deg);
	height: 430px;
}
.wrapper1:before{
    background: lightblue;
	
}
.wrapper2:before {
    background: red;
}
footer:before {
    height: 450px;
    top: -50px;
    left: 0;
    background: yellow;
}

<div class="wrapper0">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
</div>
<div class="wrapper1">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
</div>
		
<div class="wrapper2">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
</div>

<footer>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolorem maxime magnam tempora, maiores totam fugiat quisquam a minus sunt aut voluptatum at veniam deserunt quibusdam mollitia culpa necessitatibus labore.
</footer>