Мне нужно создать 2 цветных адаптивных фона кривой с SVG - PullRequest
Новая
       58

Мне нужно создать 2 цветных адаптивных фона кривой с SVG

0 голосов
/ 25 марта 2019

Мне нужно создать кривый отзывчивый фон SVG, с двумя цветами.

1

я попробовал это ниже код: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100% 100%" class="hidden-xs hidden-sm">
                        <defs>
                            <clipPath id="clip-Nye">
                                <rect width="100%" height="100%"/>
                            </clipPath>
                        </defs>
                        <g id="Nye" data-name="Nye" clip-path="url(#clip-Nye)">
                            <rect width="100%" height="100%" fill="#fff"/>
                            <path id="Rectangle" d="M0,453.226,817.641,0s696,663.078,406.715,730.84q-335.194,78.515-815.961,459.149C142.369,1400.607,0,453.226,0,453.226Z" transform="matrix(-0.485, 0.875, -0.875, -0.485, 1914.704, 197.622)" fill="#01b0f0"/>
                        </g>
                    </svg>

Проблема в том, что, когда я минимизирую страницу с помощью CTRL + -, SVG не отображается должным образом, а сторона отображается пустой.

что я делаю не так? есть идеи?

1 Ответ

1 голос
/ 25 марта 2019

Вы можете попробовать использовать radial-gradient: 

body {
  margin:0;
  height:100vh;
  background:radial-gradient(100% 200% at left,white 50%,#01b0f0 50.1%);
}
...