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

Недавно попросили сделать сайт, адаптивнй, вот так выглядят некоторые блоки в дизайне :
Мобильная версия .
af838304929c4adb9a7a5bb3bbe6b4f2.jpg
Планшетная версия .
1102afae272f4e08905964c09575de14.jpg

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

Делал блоки, обычной формы, которому задавал прямоугольный бекграунд , но с обрезанной стрелкой. После чего каждый блок соединял и получал стрелки.
При разных
background-cover
- при cover бекграунд тянулся и стрелки срезались (пропадали, т.к. картинка растягивалась)
- про contain по бокам бекграунда появляются белое пространство .
Такие решения не подходят .
Что бы вы делали в таком случае ?
Как это можно реализовать или, хотя бы , имитировать реализацию? (Что бы стрелки встали на места)
  • Вопрос задан
  • 2537 просмотров
Решения вопроса 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);
  }
}

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

Рабочий пример.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mnjghgmjyt
@mnjghgmjyt
php it бот сети
медиа запросы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы