CSS中的响应三角形

Question

我只是想在CSS中绘制一个响应三角形。 它的高度和宽度应该随着窗口的大小而改变。

这是我的静态内容：

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  position:absolute;
  right:0px;
  bottom:0px;
  border-style: solid;
  border-width: 0 0 600px 1100px;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #01fe77 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

Answer 1

您的代码应如下所示

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  position:absolute;
  right:0px;
  bottom:0px;
  border-style: solid;
  border-width: 0 0 60vw 60vw;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
}

希望能帮助到你！

Answer 2

尝试视口宽度vw单位

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  _border-color: #000000 #000000 #01fe77 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  display: block;
  border-style: solid;
  border-width: 0 0 50vw 100vw;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
}

测试一下