如何使变换倾斜中的潜水略微倾斜

Question

我想要一个像这样的结构

但是我无法使用此代码获得此结构：

HTML CODE

<div class="row footer-bottom">
        <div class="container">
            <div class="copyright">
            <p class="text-center copy-text">Copyright &copy; 2017 Brown Box Ninja. All rights Reserved</p>
            </div>
        </div>
    </div>

CSS代码

.footer-bottom {

background-color: #000;
min-height: 140px;
-ms-transform: skew(0deg,8deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari */
transform: skew(0deg,8deg); /* Standard syntax */
}

.copyright {

color: #fff;
font-family: calibri;
font-size: 16px;
}

.copy-text {
padding-top: 5%;
}

我想要一条直线底线和一条略微倾斜的顶线，如图所示。任何形式的帮助都将受到高度赞赏。

Answer 1

请尝试使用pseudo selector，如下所示

div {
  width: 100%;
  height: 200px;
  background: #111;
  transform: skewY(5deg) translate(0px, 40px);
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  z-index: -1;
  transform: skewY(-5deg) translate(0px, 40px);
}

<div>
</div>

根据您提供的代码检查此代码，您需要使用pseudo selector作为所述的同意翻译以填补两个div之间的差距。

.footer-bottom {
  background-color: #000;
  min-height: 120px;
  -ms-transform: skew(0deg, 8deg);
  /* IE 9 */
  -webkit-transform: skew(20deg, 10deg);
  /* Safari */
  transform: skew(0deg, 8deg);
  /* Standard syntax */
  transform-origin: top left;
  position: relative;
}

.footer-bottom:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 80%;
  background: #000;
  z-index: -1;
  transform: skew(0deg, -8deg) translate(0, -40px);
}

.copyright {
  color: #fff;
  font-family: calibri;
  font-size: 16px;
}

.copy-text {
  padding-top: 5%;
  text-align: center;
  transform: skew(0deg, -8deg);
  line-height: 70px;
}

<div class="row footer-bottom">
  <div class="container">
    <div class="copyright">
      <p class="text-center copy-text">Copyright &copy; 2017 Brown Box Ninja. All rights Reserved</p>
    </div>
  </div>
</div>

Answer 2

＆＃13;

＆＃13;

.footer-bottom:before{background-color: #000; position:absolute; top:-50px; left:0px; content:""; width:100%;
min-height: 80px;
-ms-transform: skew(0deg,2deg); /* IE 9 */
-webkit-transform: skew(0deg,2deg); /* Safari */
transform: skew(0deg,2deg); /* Standard syntax */}
	.footer-bottom { position:relative; padding-top:50px; margin-top:80px;

background-color: #000;
min-height: 140px;

}

.copyright {

color: #fff;
font-family: calibri;
font-size: 16px;
}

＆＃13;

<div class="row footer-bottom">
        <div class="container">
            <div class="copyright">
            <p class="text-center copy-text">Copyright &copy; 2017 Brown Box Ninja. All rights Reserved</p>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;