Javascript 如何创建三角形网站布局？

我试图创建一个网站布局类似的线框附加。深灰色三角形会有背景图像，上面有文本，理想情况下会有响应

我已经研究了一些选项，例如使用边框的变换和css三角形，但似乎找不到有效的解决方案

如有任何建议，将不胜感激

---

互联网是由正方形组成的：（我认为内容只会尊重正方形/矩形的边界。你可以让东西看起来像一个三角形，但对于任何类型的响应性布局，你都很难让内容遵守三角形的边界。你可以将正方形放在三角形中，并硬编码位置和宽度……但响应性将是大量的媒体查询。）不同屏幕分辨率上的样式和尝试与错误请显示您尝试过的内容。Stackoverflow既不是免费的代码编写服务，也不是“如何使用”服务教程服务。目标是让其他人帮助您改进代码。对于所有设备大小，您所要求的都不会是微不足道的。这很难实现，响应也很难。您得到的答案显示了我能想到的唯一合理的方法，这里有一个活例：@charlietfl我不是在寻找代码编写服务ce，有人能给我指出正确的方向，但谢谢你的帮助。@ChrisG看起来很棒，这确实给了我一个很好的工作基础。非常感谢你。