html - 如何使用以 vw/vh 为单位的点创建 SVG 响应多边形？

Question

假设我有一个三 Angular 形，如下例所示。但是这些点是以像素为单位的。我正在尝试使用这个三 Angular 形作为背景元素。是否可以以 vw/vh 为单位传递这些点？

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

Answer 1

如果您想要三 Angular 形背景，只需考虑如下渐变:

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

或者像那样使用 SVG:

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;
}