IE中的clip-path或创建斜线设计的其他方法

Question

我正在设计一个单页html页面（这是主设计的简化版本。主要设计是here）。

如您所见，div（或任何其他块级元素）创建了三个（或更多）部分。

每个div的下边缘由三条相连的线组成（其中两条是对角线，另一条是实线）。

在每个部分中都可以插入任何html内容，并且它们的背景颜色未指定且可以不同。

我在网上搜索了很多，发现要创建剪切的div（框）我应该使用clip-path新的css属性。这是非常棒的，但它是非常新的，一些浏览器（在他们的旧版本中）和IE（对我来说很重要）不支持。

甚至，通过Clippy tools，我创建了一个您可以在CodePen上看到的部分的简单设计。

如果是，我可以使用SVG制作这个方案吗？

任何人都可以帮助我，我如何设计主要浏览器支持的方案。

更新 我更改设计图片以获得更多清晰度