Shape oblique bottom border of a div

css, css-shapes, html

Solution

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>

Problem

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; } ```

Original source