I'm developing a responsive web application, and need to create 2 separate content areas as follows,
[![Reference Image](https://i.stack.imgur.com/5Q6L7.jpg)](https://i.stack.imgur.com/5Q6L7.jpg) 

So far, I tried,

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

```

But, unfortunately couldn't create a triangle.

Is there any other way to create a triangle using CSS with the possibility to wrap content entirely within the div's besides using the border property?

Any help would be greatly appreciated.