Достижение диагонально-нарезанного макета, в котором элементы div располагаются бок о бок

Я пытаюсь добиться такой диагональной компоновки -

Диагональное расположение

И я наткнулся на https://bennettfeely.com/clippy/, который идеально подходит, поскольку я могу использовать clip-path: polygon создает мою фигуру, единственное, что поддержка у него не очень хорошая (вообще не работает в IE). Я пытался найти полифиллы, но пока не могу найти ничего, что работало бы должным образом.

Каждый диагональный раздел будет тизером статьи, который клиент будет обновлять, чтобы с ним было связано изображение и некоторый контент.

Я создал скрипт, который показывает, где я сейчас использую clip-path: polygon - https://jsfiddle.net/pfx3Lxj3/ - но мне интересно, есть ли у кого-нибудь другие рекомендации о том, как я могу заставить это работать по крайней мере в IE10 и выше. Все остальные браузеры вроде нормально работают.

<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>

html css polyfills clip-path
person finners    schedule 27.09.2017    source источник
comment
Не могли бы вы просто вернуться к вертикальной полосе для пользователей IE/Edge?   -  person chazsolo    schedule 27.09.2017
comment
Да, это был бы мой запасной вариант, если бы я не смог найти достойное решение, но кто-то добавил действительно хороший и простой ответ ниже.   -  person finners    schedule 27.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Отметьте это. Вы можете использовать свойство skew. Поддержка этого, конечно, зависит от поддержки перехода/преобразования CSS3 в браузере, поэтому вы смотрите на IE9 и выше.

так это работает

.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>

person Hiren Vaghasiya    schedule 27.09.2017