如何使用transform:skew使两个div稍微倾斜

Question

我想要这样的结构：

​

​

但是我是用我的html和css代码得到的：

​

​

下面是我正在使用的HTML代码：

<section>
    <div class="row footer-top">
    <div class="container">
        <div class="copyright">
        <p class="text-center copy-text">2018</p>
        </div>
    </div>
    </div>
    <div class="row footer-bottom">
        <div class="container">
            <div class="copyright">
            <p class="text-center copy-text">2017</p>
            </div>  
        </div>
    </div>
</section>

下面是我正在使用的CSS代码：

.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; margin-top:80px;
background-color: #000;
min-height: 140px;
}


.footer-top:before{background-color: #262a2f; 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-top { position:relative; margin-top:80px;
background-color: #262a2f;
min-height: 140px;
}

任何形式的帮助都会受到高度的感谢。

Answer 1

我在这里解决了你的问题：https://jsfiddle.net/gth6y1ss/1/

基本上，你不是在扭曲div，而是你放在前面或后面的元素。

您的问题有两种解决方案：

1)只需在footer-top后面添加一个元素(这就是我所做的，以同样的方式倾斜它，并在底部稍微平移它)

.footer-top:after{
background-color: #262a2f; position:absolute; 
top:95px; 
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 */
}

2)只需要倾斜页脚顶部本身，而不添加脚注-顶部:之前

Answer 2

只需从您的样式中删除.footer-bottom类中的margin-top即可。

如果需要，您可以添加padding-top。看看这是否解决了您的问题。