html - CSS3 Layout - 4 column with Polygin -
i have big problem 4 columns layout inside view.
i must build layout:
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
Post a Comment