Html 我如何用CSS创建一个直角三角形，它跨越了包含元素的100%宽度？

我正在尝试使用CSS在包含div中放置一个直角三角形，以便三角形占据包含div的全部高度和宽度

高度设置为

100px

，因此很容易处理，但宽度是可变的（基本上是屏幕宽度的100%），我不知道如何使三角形适当拉伸以获得可变宽度

下面是我想在屏幕上看到的内容：

下面的标记和CSS是我所能得到的最接近的，但我遇到的问题是，你不能为边框宽度设置百分比，而为边框宽度设置

100vw

并不能考虑垂直滚动条，这会导致红色三角形的宽度过宽，从而在站点中添加水平滚动条

HTML:

有人知道如何解决这个问题吗？谢谢。

.triangle{
背景图像：线性渐变（右上角，红色50%，蓝色50%）；
高度：100px；
宽度：100%；
}

sol，我真的很喜欢这种简单的方式。这几乎是一个完美的解决方案，除了一个事实，即线性梯度创建了一个真正的锯齿状边缘。因此，我将继续寻找更好的解决方案。请注意，与此问题相关联的问题不起作用。它与我在本文中提到的使用

100vw

的问题相同。索尔下面关于线性梯度的回答是有效的，但你们会得到一个非常锯齿状的边缘。因此，我基本上使用了上述CSS，然后添加了以下JS以在页面加载时运行，以解决滚动条问题：

constScrollbarWidth=window.innerWidth-document.documentElement.clientWidth

document.querySelector（'.container'）.style.borderLeftWidth=`calc（100vw-${scrollbarWidth}px）`这是我能找到的唯一真正有效的解决方案。如果有更好的解决方案，请让我们都知道。我在前面的评论中犯了一个错误，DOM选择器应该是
document.querySelector（'.triangle'）
，而不是
document.querySelector（'.container'）
。很抱歉
<div class="container">
    <div class="triangle">
    </div>
</div>

.container {
    background: blue;
    height: 100px;
}

.triangle {
    border-color: transparent transparent transparent red;
    border-style: solid;
    border-width: 100px 0 0 100vw;
}