如何使用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: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

只需删除margin-top课程中的.footer-bottom即可。

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