形状为div的斜底边框

Question

我正在构建一个简单的网站，在其着陆页上我需要两个背景。为此，我使用了两个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;


}

Answer 1

FIDDLE HERE

CSS：

.se-slope{
    background: #47650a;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);

}

.se-slope {
    margin: 0 -50px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.se-content {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    color: #000;

   padding-top:120px;
   padding-bottom: 120px;
   margin-left: 10%;
   margin-right: 10%;

}

.above{
   background: #47650a;
   padding-bottom: 120px;
   width:100%;
}

.below
{
  background: gray;
  padding-bottom: 120px;
  margin-top: -110px;
}

HTML：

<div class="above">

 </div>
 <div class="se-slope">
        <article class="se-content">
          <p>You should use CSS TRANSFORM. That way you can do all kinds off neat stuff. Hav you tried skew allready? Or animations in JQuery build cool wepp apps. Be creative use arrows and circles...</p>
        </article>
</div>

 <div class="below">

 </div>