仅使用CSS创建三角形

我正在开发一个响应式Web应用程序,需要创建两个单独的内容区域,如下所示,

到目前为止,我试过,

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;

但是,遗憾的是无法创建一个三角形.

有没有其他方法可以使用CSS创建一个三角形,除了使用border属性之外还可以将内容完全包装在div中？

任何帮助将不胜感激.