我想要这样的结构:
但是我使用我的 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;
}
我们将不胜感激任何形式的帮助。
最佳答案
我用这个 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) 只需倾斜页脚顶部本身,根本不添加页脚顶部:之前
关于html - 如何使用变换 :skew 使两个 div 稍微倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45048782/