Как да задам пътека на DIV към полигон въз основа на даден SVG?

Ето фиктивна демонстрация

Бих искал да задам hero--right::after div във форма, базирана на SVG файл, използвайки clip-path. Аз съм начинаещ, така че това е причината да съм малко нуб.

<svg width="669" height="536" viewBox="0 0 669 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 625H680V0H427.587C349.956 0 279.194 44.4883 245.547 114.449L0 625Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="277.242" y1="282.534" x2="430.94" y2="581.475" gradientUnits="userSpaceOnUse">
<stop stop-color="#1BABF9"/>
<stop offset="1" stop-color="#1B7AC1"/>
</linearGradient>
</defs>
</svg>

Както можете да видите, svg изображението е широко само 669px и бих искал вместо това да задам 100vw, без никаква промяна, то е с линеен градиент, точно както в демонстрацията. Как мога да използвам пътя на SVG като клип-път: polygon()? Или как да настроите този даден SVG на формата DIV?


person mkmdev    schedule 10.01.2021    source източник