DIV под наклоном

Помогите, пожалуйста. Мне нужно сделать:

1. Дивы неправильной формы
2. Чтобы при наведении на див менялся бэкграунд

Пока что у меня получается только накладывать прямоугольные блоки с фоном, но в этом случае они залезают друг на друга и при наведении меняется только часть фона. Может вы сможете подсказать как это лучше реализовать?

Заранее спасибо

HTML

<div class="serv_block">
        <div class="serv_block1"></div>
        <div class="serv_block2"></div> 
        <div class="serv_block3"></div>
        <div class="serv_block4"></div>
    </div>`

CSS

.serv_block1 {
    background: url(../img/serv_block1.png) no-repeat top left;
    width: 100%;
    height: 650px;
    z-index: 9;
    position: relative;   
    float: left;
     -webkit-clip-path: polygon(0 0%,100% 0,50% 100%,0 100%); 
    margin-left: -9%;
    margin-top: -100px;
    shape-outside: url(../img/serv_block1.png);
}
.serv_block4:hover {
    background: url(../img/serv_block44.png) no-repeat top right;
}
.serv_block2 {
    background: url(../img/serv_block2.png) no-repeat top right;
    width: 100%;
    height: 650px;
    z-index: 9;
    position: relative;   
    float: right;
        -webkit-clip-path: polygon(0 0%,100% 0,100% 100%,0% 100%);
    margin-right: -6%; 
    margin-top: -650px;
    shape-outside: url(../img/serv_block2.png);
}
.serv_block3 {
    background: url(../img/serv_block3.png) no-repeat top left;
    width: 100%;
    height: 650px;
    z-index: 9;
    position: relative;   
    float: left; 
    -webkit-clip-path: polygon(0 0%,100% 0,50% 100%,0 100%);
    margin-left: -9%;
    shape-outside: url(../img/serv_block3.png);
}
.serv_block4 {
    background: url(../img/serv_block4.png) no-repeat top right;
    width: 100%;
    height: 650px;
    z-index: 9;
    position: relative; 
    float: right;
     overflow:hidden;
        -webkit-clip-path: polygon(0 0%,100% 0,100% 100%,0% 100%);
    margin-right: -6%;
    margin-top: -650px;
    shape-outside: url(../img/serv_block4.png);
}