CODEWITHSUNDEEP
css
Rehan Aslam
Rehan Aslam

Reputation: 241

Skewing divs via CSS

Attached is a brief mockup of what I need to create. The div not only needs to skew on the bottom, but the next row will need to skew to the top.

Is there a clean way this can be done using CSS? I've tried some CSS solutions ( e.g http://jsfiddle.net/mXLgF/ ) but can not get this effect.

My current HTML / CSS is at this stage:

    <div class="skew_bottom_right">

        <div style="height: 300px; background: url('http://placehold.it/850x350');">
        </div>
    </div>

.skew_bottom_right div:after {
content: '';
position: absolute;
left: 0;
bottom: -60px;
width: 100%;
height: 115px;
background: white;
-webkit-transform: skewY(8.5deg);
-moz-transform: skewY(8.5deg);
-ms-transform: skewY(8.5deg);
-o-transform: skewY(8.5deg);
transform: skewY(8.5deg);
-webkit-backface-visibility: hidden;
z-index: 5;
}

Each of those containers will eventually made into a slide, so ideally they should be div's with background images or containing divs having a background image.

Mockup required

Upvotes: 1

Views: 396

Answers (1)

Guy Sopher
Guy Sopher

Reputation: 4462

Your code is pretty good. Just needed some minor adjustments...

.container{
    overflow:hidden;
}
.parallelogram {
    width: 600px;
    height: 100px;
    margin: 30px 0;
    transform: skewY(5deg);
    background: gray;
    overflow:hidden;
    position:relative;
}

.parallelogram.header {
  height: 150px;
  margin: -30px 0;
}

.parallelogram.footer {
  height: 150px;
  margin: -30px 0;
}

.image{
    background: url(http://placekitten.com/300/300);
    background: blue;
    width: calc(100% / 3);
    height: 100%;
    display: inline-block;
    float: left;
    border: 3px solid white;
    box-sizing: border-box;
}
<div class="container">
    <div class="parallelogram header"></div>
    <div class="parallelogram">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
    </div>
    <div class="parallelogram footer"></div>
</div>

Upvotes: 2

Related Questions