如何使用css

Question

我正在使用skews创建一个简单的布局，我的布局是这样的：

我想要的是这样的：

我的问题是我无法在父容器内部生成另一个div。 这是我的CSS和HTML：

/*** VCONTENT ***/

#v-container {
  position: relative;
  background: #000;
}

#homepage-content-banner {
  margin-top: 50px;
  margin-bottom: 90px;
  position: relative;
  text-align: center;
  z-index: 0;
  background: #000;
}

#homepage-content-banner h1 {
  font-family: times new roman;
  color: #fff;
  font-size: 80px;
  margin-top: 35%;
}

#homepage-banner-images {
  background-image: url('../images/top-banner-full.png');
  background-repeat: no-repeat;
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 100%;
  max-height: 100%;
  background-size: 100%;
  height: 950px;
  min-height: 950px;
  margin-bottom: 150px;
}

#scroll-bottom {
  color: #fff;
  margin-top: 16%;
  font-family: blueHighway;
}

#scroll-bottom:hover {
  cursor: pointer;
  color: #FFF100;
}

#homepage-about-us {
  height: 300px;
  position: relative;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  background: #fff;
}

#homepage-about-us::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: 0;
  bottom: 0;
  transform-origin: left top;
  transform: skewY(-10deg);
}

<div id="v-container">
  <div class="container-fluid" id="homepage-content-banner">
    <div class="row">
      <div class="col-md-12" id="homepage-banner-images">
        <h1 class="headline">EVERYTHING IN THE WORLD IS<br />UNDER THE SAME SKY</h1>
        <div id="scroll-bottom">
          <h4>SCROLL</h4>
          <div class="fa fa-long-arrow-down fa-2x"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="homepage-about-us">
    <div class="inner-line">
      <div class="img"></div>
    </div>
  </div>
</div>

你能帮我解决这个问题吗？

Answer 1

您可以使用skewY创建第二个项目::after：

＆＃13;

＆＃13;

/*** VCONTENT ***/

#v-container {
  position: relative;
  background: #000;
}

#homepage-content-banner {
  margin-top: 50px;
  margin-bottom: 90px;
  position: relative;
  text-align: center;
  z-index: 0;
  background: #000;
}

#homepage-content-banner h1 {
  font-family: times new roman;
  color: #fff;
  font-size: 80px;
  margin-top: 35%;
}

#homepage-banner-images {
  background-image: url('../images/top-banner-full.png');
  background-repeat: no-repeat;
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 100%;
  max-height: 100%;
  background-size: 100%;
  height: 950px;
  min-height: 950px;
  margin-bottom: 150px;
}

#scroll-bottom {
  color: #fff;
  margin-top: 16%;
  font-family: blueHighway;
}

#scroll-bottom:hover {
  cursor: pointer;
  color: #FFF100;
}

#homepage-about-us {
  height: 300px;
  position: relative;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  background: #fff;
}

#homepage-about-us::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: 0;
  bottom: 0;
  transform-origin: left top;
  transform: skewY(-10deg);
}
#homepage-about-us::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: yellow;
  z-index: 0;
  bottom: 0;
  transform-origin: left top;
  transform: skewY(-10deg);
}

＆＃13;

<div id="v-container">
  <div class="container-fluid" id="homepage-content-banner">
    <div class="row">
      <div class="col-md-12" id="homepage-banner-images">
        <h1 class="headline">EVERYTHING IN THE WORLD IS<br />UNDER THE SAME SKY</h1>
        <div id="scroll-bottom">
          <h4>SCROLL</h4>
          <div class="fa fa-long-arrow-down fa-2x"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="homepage-about-us">
    <div class="inner-line">
      <div class="img"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;