Search code examples
htmlcsspolyfillsclip-path

Achieving a diagonal sliced layout where divs sit side by side

I'm trying to achieve a diagonal layout like this -

Diagonal layout

And I've come across https://bennettfeely.com/clippy/ which is perfect as I can use clip-path: polygon create my shape, only thing is the support on it is not great (does not work in IE at all). I've tried to find polyfills but as of yet, can't find anything that works properly.

Each diagonal section will be an article teaser which the client will update so an image and some content will be associated with it.

I've created a fiddle which show's where I'm currently at using clip-path: polygon - https://jsfiddle.net/pfx3Lxj3/ - but I'm wondering if anyone has any other recommendations of how I can get this working in at least IE10 and up. All other browsers seem to be fine.

<div class="section">
  <div class="grid poly--holder">
    <div class="poly-item"></div>
    <div class="poly-item"></div>
    <div class="poly-item"></div>
    <div class="poly-item"></div>
  </div>
</div>
Solution

  • Check this You can use skew property, Support for this of course depends on CSS3 transition/transform browser support, so you’re looking at IE9 and up

    so it works

    .grid {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.poly--holder {
    overflow: hidden;
}
    
.poly--holder .poly-item {
    box-sizing: border-box;
   margin: 0;
    transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    background: blue;
    width:35%;
    height: 400px;
}

.poly--holder .poly-item:nth-of-type(1) {
  z-index: 4;
  margin: 0 0 0 -10%;
}

.poly--holder .poly-item:nth-of-type(2) {
  z-index: 3;
}

.poly--holder .poly-item:nth-of-type(3) {
  z-index: 2;
}

.poly--holder .poly-item:nth-of-type(4) {
  z-index:1;
  margin: 0 -10% 0 0;
}

.poly--holder .poly-item:nth-of-type(odd) {
    background: green;
}
    <div class="section">
  <div class="grid poly--holder">
    <div class="poly-item"></div>
    <div class="poly-item"></div>
    <div class="poly-item"></div>
    <div class="poly-item"></div>
  </div>
</div>