CSS3 Layout - 4 column with Polygin - html

Question

I have a big problem with 4 columns layout inside my view.
I must build this layout:
Anybody know how I can make this layout? I use -clip method but first div always is another from last div. Two centered div is OK but first and last not.
Please, help me if you know how I can do this...

Answer 1

Here is an example using trapezoid borders in combination with positioning:
body {
margin: 0;
}
.section {
position: relative;
display: inline-block;
width: 25%;
margin-right: -4px;
}
.background {
position: absolute;
top: 0;
width: 100%;
height: 0;
border-right: 30px solid transparent;
border-bottom: 300px solid #346;
}
.content {
position: absolute;
top: 0;
color: #fff;
padding: 10px 10px 10px 30px;
z-index: 100;
}
.s1 .background {
border-bottom-color: yellow;
z-index: 5;
}
.s2 .background {
border-bottom-color: blue;
z-index: 4;
}
.s3 .background {
border-bottom-color: navy;
z-index: 3;
}
.s4 .background {
background-color: black;
border: none;
height: 300px;
}
<div class="section s1">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s2">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s3">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s4 last">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
Limits: You have to define a fixed height (300px in the example above)