Див блок не прямоугольной формы.

Здравствуйте, ни как не могу реализовать вот такие дивы:

 

https://habrahabr.ru/post/126207/
4 div
прямоугольник
треугольник
треугольник
прямоугольник

 

Решение вроде подходит, но... на рисунке у верхнего блока идет картинка у границы... как вот её туда вставить.
Вот так должно быть:

--- Добавлено, 26 сен 2016 ---

И еще. Тут для бордера необходимо конкретную ширину указывать, а мне надо что бы при любом разрешении на всю страницу растягивалось.

 

Решил вопрос.

 

Напишите решение, интересно!
Вдруг кому пригодится?

 

Думал что решил:

Код:

.sec1{
    width: 100%;
    height: 540px;
    background: #5fc18b;
    position: relative;
}

.sec1::after{
    content: '';
    position: absolute;
    background: #5fc18b;
    min-width: 100%;
    height: 330px;
    bottom: -205px;
    -moz-transform: skewY(-10deg);
    overflow: hidden;
 }

.sec1::before{
    content: '';
    position: absolute;
    background: #308355;
    min-width: 100%;
    height: 30px;
    bottom: -165px;
    -moz-transform:  skewY(-9deg);
    overflow: hidden;
}

.sec2{
    width: 100%;
    height: 794px;
    z-index: -1;
    background: #44a36f;
}

Это подходит, если нет необходимости расположить sec1:after позади sec1, а мне надо.. вот эту проблему пока не решил.

--- Добавлено, 29 сен 2016 ---

Решил:

HTML:

<div class="sec1">
    <div class="sec1_1"></div>
    <div class="sec1_2"></div>
    <div class="sec2"></div>
</div>

Код:

.sec1{
    width: 100%;
    height: 540px;
    background: url("../img/sec1_img.png") no-repeat 40% 75px #5fc18b;
    position: relative;
}

.sec1_1{
    content: '';
    position: absolute;
    background: #5fc18b;
    min-width: 100%;
    height: 410px;
    bottom: -206px;
    -moz-transform: skewY(-12deg);
    overflow: hidden;
    z-index: -1;
 }

.sec1_2{
    content: '';
    position: absolute;
    background: #308355;
    min-width: 100%;
    height: 30px;
    bottom: -218px;
    -moz-transform:  skewY(-11deg);
    overflow: hidden;
    z-index: -2;
}

.sec2{
    position: absolute;
    width: 100%;
    height: 794px;
    z-index: -3;
    background: #44a36f;
    bottom: -794px;
}

 

Сделал немного по другому... так кажется лучше.

HTML:

<div class="sec">
    <div class="sec1"></div>
    <div class="sec2"></div>
    <div class="sec3"></div>

Код:

.sec{
    width: 100%;
    height: 1350px;
    background: url("../img/sec1_img.png") no-repeat 40% 75px #44a36f;
    position: relative;
    text-align: center;
}

.sec1{
    position: absolute;
    top: 0;
    width: 100%;
    height: 550px;
    background: #5fc18b;
    z-index: 999;

}

.sec2{
    position: absolute;
    background: #5fc18b;
    width: 100%;
    height: 370px;
    bottom: 600px;
    -moz-transform: skewY(-10deg);
    overflow: hidden;
    z-index: 2;

 }

.sec3{
    position: absolute;
    background: #308355;
    min-width: 100%;
    height: 24px;
    bottom: 595px;
    -moz-transform:  skewY(-9.5deg);
    overflow: hidden;
    z-index: 1;
}

 

http://html5book.ru/css3-transform Куча разных видов блоков на css (в плане как сделать), на будущее может пригодиться и не только тебе)