Сложная верстка фигурных блоков с контентом

Мне нужно сверстать https://yadi.sk/i/siEDd0cK5UVShg
Пока выходит только так https://yadi.sk/i/w4n_3MFGv-4Kmw
Изображение не вылезает за блок. Я использую свойство полигон

#unichtogaem div.first{
clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
background: #d2edbd;
}

<section id="unichtogaem">
<div class="uk-container uk-container-center"><h2>Мы уничтожаем</h2></div>
<div class="first">
<div class="uk-container uk-container-center">
<img src="images/Unichtogaem/unichtogenie-holodnim-tumanom.png">
</div>
</div>
</section>
Кто-нибудь смог бы подсказать как это делается. Никакие индексы и задание позиций относительных или абсолютных к должному эффекту не приводят, т.к. полигон обрезает всё начисто, оставляя внутри своей области необходимый контекст.

 

Лучше бы ответили если можете на вопрос. Тема создана в выбранном разделе, всё нормально

 

Слишком умные все пошли. Там пока простой код который я выставил. Его запросто можно внести в любой созданный html файл и попробовать на компьютере у себя. Если бы была посложнее верстка, то я конечно мог бы занести его в сервис

 

А вам походу надо просто что-то написать и не важно по теме или нет