Как лучше сверстать блоки с наклонами?

Question

[WebforSelf]

Друзья, есть такой макет. Требуется адаптивная верстка.
Все блоки, а их 8 в лендинге имеют вот наклон ( см. скрин)


Вариантов вижу два ( либо через псевдо элементы) либо через clip-path. Но заметил что второй вариант при адаптивности меняет свой угол.

Верстаю на бустрапе, как лучше сверстать данные блоки ?

Answer 1

[profesor08]

Чтоб добиться такого чистого эффекта, придется сделать данный блок обычным прямоугольником с overflow:hidden;
Далее его повернуть против часовой на несколько градусов transform: rotate(-15deg); Тем самым у тебя получится наклоненный прямоугольник. Будет проблема с краями, что видны его углы, для этого увеличь ширину этого контейнера, например 150%, главное скрыть, внутреннему контейнеру задашь нужную ширину. Останется выровнять внутреннее содержимое до горизонтального состояния, для этого поверни его в обратную сторону на то-же количество градусов transform: rotate(15deg);.

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 150%;
  transform: rotate(-15deg);
}

.inner {
  transform: rotate(15deg);
}

Comments

[WebforSelf]

К сожалению углы остаются. Если делаю ширину больше, то за края браузера уходят и скрол появляется.

[Dymok]

WebforSelf, а overflow: hidden указан?

[WebforSelf]

UnluckySerivelha, получилось добиться ровного состояния

transform:skew(5deg) rotate(5deg); у родительского

transform:skew(5deg) rotate(5deg); у внутреннего

Answer 2

[Борис]

https://codepen.io/anon/pen/XqqOwV

Comments

[WebforSelf]

а можно как сто сделать чтоб скошенный угол был только снизу?? и почему никто не советует clip-path?? Он все еще не поддерживается?

[Борис]

WebforSelf, https://codepen.io/anon/pen/aGGxXm

Answer 3

[Алексей]

Может попробовать через:
transform: rotate();

Answer 4

[Максим]

https://codepen.io/topicstarter/pen/OZZwzb