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

尝试viewport宽度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;
}

Test it

在css中的响应三角形

2 个答案: