如何以vw / vh单位给定的点创建SVG响应多边形？

Question

Let's say I have a triangle like in the example below. But the points are in pixels. I'm trying to use this triangle as a background element. Is it possible to pass those points in vw/vh units?

 <svg > <polygon className='svg1' points="50,0 100,100 100,0" /> </svg> 

Answer 1

If you want a triangle background simply consider gradient like below:

 body { margin:0; height:100vh; background:linear-gradient(to top right,transparent 49.5%,#000 50%); } 

Or with SVG like that:

 body { background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" ><polygon points="0,0 100,100 100,0" /></svg>') 0 0/100% 100%; margin:0; height:100vh; }