html - CSS3 Layout - 4 column with Polygin -


i have big problem 4 columns layout inside view.

i must build layout:

http://oi68.tinypic.com/2ntz6gg.jpg

anybody know how can make layout? use -clip method first div last div. 2 centered div ok first , last not.

please, me if know how can this...

here example using trapezoid borders in combination 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: have define fixed height (300px in example above)


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -