Возможно ли сделать бекграунды не стандартной формы в адаптивном дизайне? Стоит ли вообще?

Question

[Абра Кадабра]

Недавно попросили сделать сайт, адаптивнй, вот так выглядят некоторые блоки в дизайне :
Мобильная версия:


Планшетная версия:



Как видите там все блоки - стрелки, которые направлены вниз.
Как это можно реализовать, что бы и в мобильной версии и в ПК стрелки выглядели нормально?
Как я пробовал:

Делал блоки, обычной формы, которому задавал прямоугольный бекграунд, но с обрезанной стрелкой. После чего каждый блок соединял и получал стрелки.
При разных
background-cover
- при cover бекграунд тянулся и стрелки срезались (пропадали, т.к. картинка растягивалась)
- про contain по бокам бекграунда появляются белое пространство.
Такие решения не подходят.
Что бы вы делали в таком случае?
Как это можно реализовать или, хотя бы, имитировать реализацию (чтобы стрелки встали на места)?

Answer 1

[Михаил Горячкин]

Можно попробовать сделать при помощи трансформаций.
Вот по быстрому пример набросал:

<div class="treangle">
  <div class="treangle--left"></div>
  <div class="treangle--right"></div>
</div>

CSS:

body, html {
  height: 100%;
  width: 100%;
}
.treangle {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
  
  [class*='treangle--'] {
    width: 100%;
    height: 50%;
    position: absolute;
    background-color: yellow;
  }
  
  .treangle--left {
    float: left;
    left: -50%;
    transform: rotate(20deg);
    transform: matrix(-1, -0.2, 0, 1, 0, 0);
  }
  
  .treangle--right {
    float: right;
    right: -50%;
    transform: rotate(-20deg);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
  }
}

Все будет ресайзиться как надо. Вопрос только в поддержке браузеров.

Рабочий пример.

Comments

[Абра Кадабра]

Шикарно, а что с поддержкой ?

[Михаил Горячкин]

Все нормальные браузеры и IE9+

Answer 2

[Владимир Шикльгрубер]

медиа запросы.

Comments

[Абра Кадабра]

Серьезно?
Картина съезжает через 10-15 пикселей.
Мне от 320 до 4к запросы писать?

[Владимир Шикльгрубер]

нет. Бекграунд картинкой Трех угольники тоже. И просто фон тяните через background-size

[Владимир Шикльгрубер]

Андрей Петров: и три медиа. Так намного проще чем всё делать в 1 css