Как сверстать такую подложку?

Question

[deniskins23]

Доброго времени суток.
Попалась в макете такая вот штука.
Она сделана в нем просто растровым изображением.Это подложка под меню.
Все бы ничего,но на адаптиве она ужасна, в нее не умещаются пункты меню, и так далее. Значит нужно ее верстать.
Кто может подсказать как верстать такое?Я понимаю, что это скорее всего svg, но что-то я только начал учить его, и не получается реализовать.

Comments

[Rustam Bainazarov]

Как сверстать подобное?

[Rustam Bainazarov]

Проще всего на clip-path, но это только если вас устроит поддержка со стороны браузеров.
https://bennettfeely.com/clippy/

[deniskins23]

Рустам Байназаров, Точно нет..-)А другие варианты есть?

[Rustam Bainazarov]

deniskins23, а что точно нет? Вы о SVG или clip-path?

Других вариантов нет, если нужна адаптивность. Если не нужна и высота одинаковая — таком на границах.

[Rustam Bainazarov]

Ну или посмотрите, как Яндекс.Маркете такие лейблы хитро сделаны на transform и clip. Но они по высоте тоже не адаптивные.

[deniskins23]

Рустам Байназаров, Про точно нет я сказал о clip-path,слишком слабая поддержка..А на svg не смогу написать, скила не хватает пока.. Подсказать не сможешь?Хотя бы набросок

[Rustam Bainazarov]

deniskins23, ну, чтобы помочь, то нужно понимать, как и куда все это двигается/тянется при адаптивности, вы это укажите в вопросе, иначе никто не сможет вам помочь. В данном случае можно и растр ваш туда поместить, только, как я понял теперь, там есть штриховка внутри -- и вот она будет растягиваться так себе. Но! С учетом ее размером, то тут можно внутри просто закрасить полностью эту область полупрозрачным белым, никто эту штриховку при маленьком размере не видит и так.



Как видите, данный подход приводит к искажению в зоне треугольного выреза, ибо он подходит только если идет изменение только по высоте в данном случае. Кстати, можно сделать сборную солянку из 3 частей, которые будут совмещены: слева не тянется фикс, по середине тянущийся паттерн, а и справа — снова фикс этой треуголки. Словом, мне лень это делать. Может, кто-то и сделает это.

Не знаю, можно ли в данном случае так настроить SVG, чтобы он визуально правильно тянулся только из одного файла без JS.

[deniskins23]

Рустам Байназаров, Могу показать. kitkraken.deep-webb.ru Вот тут на гамбургер если нажать как раз и будет тот элемент. Сожми до мобильной версии скажем до 400px и будет понятна проблема. И как ее исправить не знаю, поэтому и спросил

[Rustam Bainazarov]

deniskins23, ну тогда пусть на абсолютном позиционировании тянется по высоте. Только штриховка немного поплывет внутри.

[deniskins23]

Рустам Байназаров, И за это мне наговорят кучу гадостей..-)

[Rustam Bainazarov]

deniskins23, ну тогда я вариантов не вижу. Только SVG и JS, который будет контролировать размеры отдельных групп элементов внутри. Если проще — то это несколько слоев (первый слой темно-синей подложки, второй слой с уголками и третий слой с паттерном границ и шриховки) + clip-path. И то останется вопрос с несколькими уголками, где линии пересекаются не под прямым углом.

Иначе надо было дизайнеру думать раньше, ведь он понимает, что браузер не будет перерисовывать его растр, чтобы подогнать под размеры? Ведь, наверное, дизайнер знает, как работает инструмент transform в PS и что из этого выходит?

[deniskins23]

Рустам Байназаров, Тут все сложно. Дизайнерам ведь всегда пофиг, нарисуют, а как реализовать плевать.
Ладно, спасибо за помощь

[Rustam Bainazarov]

deniskins23, SVG и JS вам в помощь. Если вы занимаетесь front'ом, то вам SVG тоже в определенной степени нужно знать. Либо попросите дизайнера прислать SVG-вариант, а уже сами оптимизируйте его структуру внутри, чтобы управлять ей потом с помощью JS.

[RAX7]

deniskins23, сделай несколько вариантов фона с разными пропорциями и подгружай нужный медиазапросами

@media screen and (max-width: 480px) {
  .menu {
    background-image: url(/assets/images/header/bg_menu_733x860.png); /* выше на 100px */
  }
}
@media screen and (max-width: 380px) {
  .menu {
    background-image: url(/assets/images/header/bg_menu_733x960.png); /* выше на 200px */
  }
}

[deniskins23]

RAX7, Спасибо. Я размышлял об этом варианте..