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

我用这个 fiddle 解决了你的问题: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) 只需倾斜页脚顶部本身，根本不添加页脚顶部:之前