我正在构建一个简单的网站,在其首页上需要两个背景。为此,我使用了两个div,一个在另一个上面。目前为止还不错。
问题是,我想让第一个div的底部边界(或第二个div的顶部边界)成为倾斜的。这是我想要做的草图:
问题是,我想让第一个div的底部边界(或第二个div的顶部边界)成为倾斜的。这是我想要做的草图:
你有什么想法可以实现这个吗?
我找到了这篇文章,但它只适用于浮动元素,并且似乎不太稳定。
http://sarasoueidan.com/blog/css-shapes/
提前感谢!
html:
div class="main-container" id="main-container1">
//all kinds of stuff
</div>
<div class="main-container" id="main-container2">
//all kinds of stuff
</div>
CSS:
#main-container1{
background: url(../img/background1.jpg);
background-position:center;
}
#main-container2{
background: url(../img/background2.jpg);
background-position:center;
}