Верстка геометрических форм?

Question

[Кирилл Мартынов]

Всем привет!
есть такие геометрические формы(на фоне) на странице: посоветовали делать это с помощью svg, получил от дизайнера этот svg:

<svg  height="100%" width="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <linearGradient id="linear-gradient" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#5e4bb6"/>
          <stop offset="100%" stop-color="#352d3f"/>
        </linearGradient>
        <path class="st0" fill="url(#linear-gradient)" d="M472.5,918.7L147.8,731.2c-17-9.8-27.4-28-27.4-47.7v-375c0-19.7,10.4-37.8,27.4-47.7L472.5,73.3
        c17-9.8,38-9.8,55,0l324.6,187.5c17,9.8,27.4,28,27.4,47.7v375c0,19.7-10.4,37.8-27.4,47.7L527.5,918.7
        C510.4,928.5,489.5,928.5,472.5,918.7z"/>
</svg>

понимаю, что надо его абсолютно позиционировать, уводить за экран, но не могу его растянуть на всю ширину контейнера, scale - помогает его просто увеличить, но во время скролла лагает.
Можете ли что-то посоветовать?

Answer 1

[Конан Варвар]

Не, это конечно все красиво, но лично я, оторвал бы руки дизайнеру за такую красоту :)

Answer 2

[Михаил Захаров]

Вместо scale нужно менять viewBox="0 0 1000 1000". Например, чтобы уменьшить в 2 раза, надо написать viewBox="0 0 500 500" )

Comments

[Кирилл Мартынов]

попробовал, он будто мне его увеличил и показал только одну его часть.
Но мне надо его увеличить на всю ширину контейнера. Такое возможно?

[Михаил Захаров]

Через css задайте svg {width: 100%;}

[Михаил Захаров]

Кирилл Мартынов: или если у родителя фиксированная ширина, то тогда лучше ее вписать во viewbox

[Кирилл Мартынов]

Михаил Захаров: Принял решение свг не использовать для background'a, а нарезать в пнг, из за такого количества свг на стр плюс тень его, страница лагала

Answer 3

[4X_Pro]

А что мешает вставить в div с position: absolute, у которого height и width заданы в процентах и отрицательным left?

Comments

[Кирилл Мартынов]

и в него засунуть svg?