Css 创建页面顶部和底部的三角形

我试图用SVG创建一个对角线div，但我遇到了很多问题。 我的目标是：

在左上角创建全宽贴图

在右下角创建文本的全宽div

我已经做过了，但是SVG div与地图重叠，我不能选择map，如果我将地图定位在高于SVG的位置，那么map将与整个页面重叠

你可以在图中看到我想要实现的目标应该是什么样子

---

我会使用

剪辑路径来完成这项工作。好吧，这是唯一一个不用JS和就能达到预期效果的想法，没有假设，带贴图的矩形是正方形。我也发现了

clip path CSS属性创建一个剪裁区域，用于定义应显示元素的哪个部分。更具体地说，显示区域内的部分，而隐藏区域外的部分

不幸的是，它在IE上不起作用，但是

一小条

.container{
位置：相对位置；
高度：250px；
宽度：250px；
背景：黑色；
}
.地图{
身高：100%；
宽度：100%；
背景：红色；
-webkit剪辑路径：多边形（100%0,0%100,0）；
剪辑路径：多边形（100%0,0%100,0）；
}
.拐角处{
位置：绝对位置；
右：0；
底部：0；
身高：100%；
宽度：100%；
背景：绿色；
-webkit剪辑路径：多边形（100%0、0%100%、100%100%）；
剪辑路径：多边形（100%0，0%100%，100%100%）；
}

请同时分享代码。试着放一个演示。谢谢，它奏效了。但不幸的是，它在IE中不支持：（不幸的是，它不支持，但是。如果你不知道需要剪裁的矩形的尺寸，我看不到其他解决方案。然而，如果你知道它们，那么我可以建议一些其他技巧。