Народ подскажите как сверстать блоки(div) с кошеными углами на полной версии сайта, а на планшетной блоки должны быть ровными + в каждом блоке разная картинка в качестве фона и она заполняет всю область блока.


Ответ
Вот вариант более похожий на то, что в вопросе


body {
margin: 0
overflow: hidden
}

@media (min-width: 600px) {

.item {
transform: skewX(-15deg)
}

.content {
transform: skewX(15deg)
}

div.content h1 {
transform: rotate(-75deg)
}
}

.accordion {
display: flex
}

.item {
flex: 1
transition: 0.4s
margin-left: -2px
overflow: hidden
display: flex
}

.content div {
opacity: 0
transition: 200ms
}

div.item:hover,
div.item:focus {
flex: 5
}

div.item:hover h1,
div.item:focus h1{
opacity: 0
transition: 100ms
}

div.item:hover div,
div.item:focus div{
opacity: 1
transition: 100ms
}

.item:first-child {
border-left: 0
flex: 1.25
margin-left: -5em
padding-left: 5em
}

.item:last-child {
flex: 1.25
margin-right: -5em
padding-right: 5em
}

.content {
padding: 4em
background-position: 50% 50%
background-size: cover
margin: 0 -5em
flex: 1
display: flex
justify-content: center
}

.bg1 {
background-image: url("https://i.sstatic.net/gW9Md.png")
}

.bg2 {
background-image: url("https://i.sstatic.net/gFeUb.png")
}

h1 {
color: #fff
font-size: 2em
transform: rotate(-90deg)
font-family: monospace
text-align: center
line-height: 1
justify-content: center
}

.text {
top:0
left:0
width:100%
height:100%
}