Javascript 响应钝角三角形css

我一直在寻找这个问题的答案

有没有可能在html/css或JS中制作一个响应灵敏的钝角三角形

我想做一个三角形，如下所示：

钝角三角形示例：

我确实知道如何使用边界技巧制作三角形，但我不知道如何制作otuse斜角三角形

我希望你们能帮忙，玩个聪明的把戏

致意

---

Joachim

这里有一种简单的使用线性梯度的方法：

正文{
保证金：0；
高度：100px；
背景：线性渐变（至右上角，透明50%，蓝色51%）0 0/20%100%无重复，
线性梯度（至左上角，透明50%，蓝色51%）100%0/calc（80%+1px）100%无重复；
}

使用不同宽度的边框

div{
保证金：1em自动；
身高：0；
宽度：0；
边框颜色：红色透明；
边框样式：实心；
边框宽度：250px 250px 0px 50px；
}

---

请分享您尝试的代码，创建一个感谢。这真的很有帮助。我尝试了梯度，但不知道如何管理它。现在，你已经帮助我了解了如何在（Y）@JoachimSchubert上进一步使用梯度。主要思想是依靠多重梯度，正如你所看到的，每个梯度都将成为元素的一部分。。。一个占20%，另一个占80%这是诀窍：）你可以在同一个元素中使用越来越多的渐变。非常感谢你的回答！我是用渐变背景制作的，但是我非常感谢你的帮助，我希望其他和我有同样问题的人以后也能使用这个答案！：-）