CSS3 Layout - 4 Spalte mit Polygin

Question

Ich habe ein großes Problem mit 4 Spalten Layout in meiner Ansicht.

Ich muss dieses Layout bauen:

Jeder weiß, wie ich dieses Layout machen? Ich benutze -clip Methode, aber zuerst div ist immer eine andere von letzten div. Zwei zentrierte div ist in Ordnung, aber zuerst und zuletzt nicht.

Bitte, mir helfen, wenn Sie wissen, wie ich das tun kann ...

Answer 1

Hier ist ein Beispiel Trapez Grenzen in Kombination mit der Positionierung mit:

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: Sie müssen eine feste Höhe definieren (300px im obigen Beispiel)