2

http://prntscr.com/jv0qwf

На скрине отмечено, как сейчас отображаются блоки, и как нужно

введите сюда описание изображения

3
  • здесь, здание, здоровье (с) Ирина Петровна 14 июн 2018 в 17:54
  • видел что можно сделать как то с помощью matrix3d, но не понял как
    – Freezkill
    14 июн 2018 в 17:54
  • @Freezkill скриншоты на сторонних ресурсах быстро умирают, поэтому их лучше постить здесь CTRL+G 14 июн 2018 в 19:03

1 ответ 1

2

transform: skew(N) + overflow: hidden:

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  overflow: hidden;
  width: 100vw;
  height: 50vh;
}

.skew-block {
  width: 55vw;
  height: 100vh;
  background-color: dodgerblue;
  transform: skew(-15deg);
}

.skew-block:nth-child(2) {
  margin: 0 2rem;
}

.offset {
  margin-left: -8rem;
  display: flex;
}
<div class="wrapper">
  <div class="offset">
    <div class="skew-block"></div>
    <div class="skew-block"></div>
    <div class="skew-block"></div>
  </div>
</div>

2
  • в целом не плохо, но есть одно "но" - в середине блоков <div class="skew-block"></div> будут картинки, и естественно большая часть их будет обрезана, нужно как то сделать так что бы блок <div class="skew-block"></div> не вылазил за родителя.
    – Freezkill
    14 июн 2018 в 19:32
  • @Freezkill, а в чём проблема дать этим блокам background, который вскоре просто позиционировать как нужно?
    – Arthur
    14 июн 2018 в 20:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.