html - 形状的div的斜底部边框

Question

我正在构建一个简单的网站，在其登录页面上我需要两个背景。为此，我使用了两个 div，一个在另一个之上。到目前为止一切顺利。

问题是，我希望第一个 div 的底部边框(或第二个 div 的顶部边框)是倾斜的。这是我想要做的草图:

知道如何实现吗？

我找到了这篇文章，但它只适用于 float 元素，而且看起来一点也不稳定。

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;


}

Answer 1

这不是最好的方法

.second {
    width:500px;
    height:300px;
    transform:skewY(20deg);
    background:orange;
    margin-top:-100px;
    border:2px solid green;
}

.holder{
    width:500px;
    height:800px;
    background:grey;
}

.second p{
    position:absolute;
    margin-top:200px;
    transform:skewY(-20deg);
}

<div class="holder">
    <div class="second"><p>Div 1</p></div>
</div>