Shape oblique bottom border of a div

问题:

I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good.

The problem is, I want the bottom border of the first div (or the top border of the second) to be oblique. This is a sketch of what I want to do:

Any idea how to accomplish this?

I found this article, but it only works with floating elements, and it doesn't seem stable at all.

http://sarasoueidan.com/blog/css-shapes/

Thanks in advance!

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;


}

回答1:

Not the best way to do this

.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>

回答2:

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>