Javascript 如何创建具有背景的三角形形状（固定高度，宽度=100%）

我有一个图形背景，我需要在左上角显示一个彩色三角形（与分辨率无关）

我是否可以仅使用HTML/CSS/JS创建一个三角形元素，宽度为100%，高度为200px，背景为红色

我可以通过IMG创建宽度为100%的图像，但我希望有一个比调整图像大小更好的解决方案

该解决方案需要与IE7+兼容，并使用浏览器版本（超过2%）

---

谢谢

因为您无法创建具有百分比的边框，请尝试改用vw（查看器宽度）。因此：

.triangle{
   width: 0;
   height: 0;
   border-bottom: 600px solid blue;
   border-left: 100vw solid transparent;
  }

---

IE8不支持Vw单元，对于不支持这些单元的浏览器，您需要使用JS回退

下面是一个jQuery脚本，它根据窗口大小设置边框宽度，并在调整窗口大小时进行调整。在IE8（IE测试仪）中测试：

$（文档）.ready（函数（）{
函数三角形（）{
变量宽度=$（'#wrap'）.width（），
边框=宽度/4；
$（“#wrap.tr”）.css({
“左边框”：边框+“px实心#fff”，
“边框底部”：边框+“px实心透明”
});
}
三角形（）；
$（窗口）.on（'调整大小'，三角形）；
});
正文{
背景：#fff；
}
#包裹{
位置：相对位置；
最小高度：500px；
背景：水鸭；
}
.tr{
位置：绝对位置；
左：0；
排名：0；
左边框：200px实心#fff；
边框底部：200px实心透明；
}
只需获取一个div元素，给出一个类名“triangle topleft”，然后编写下面给定的css

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

边框顶部的颜色将是div的背景色。这里是红色。
要了解更多三角形结构，请单击此链接。。
[
进一步说，我认为这实际上就是你想要的：


$（文档）.ready（函数（）{
函数三角形（）{
$（“#wrap.tr”）.css({
“左边框”：$（'#wrap'）.width（）+“px solid#fff”，
“边框底部”：“200px实心透明”
});
}
三角形（）；
$（窗口）.on（'调整大小'，三角形）；
})；
正文{
背景：#fff；
}
#包裹{
位置：相对位置；
最小高度：500px；
背景：水鸭；
}
.tr{
位置：绝对位置；
左：0；
排名：0；
}
我认为最好使用背景而不是边框：


。我的三角形{
宽度：100%；
高度：200px；
背景：线性渐变（左上角，透明50%，红色50%）；
}
这是Nabisco LOL吗？它是所有游戏中最简单的一个