I know there are some questions on SO regarding this, but most that I find deal with background split in two colors. And I can't figure out how to customize that to fit what I'm trying to make.

I need a background like this: 

[![enter image description here](https://i.stack.imgur.com/gS7rh.png)](https://i.stack.imgur.com/gS7rh.png)

And so far, whatever I tried, I can't seem to make it so that the other line goes in the opposite direction. Can someone help me out, please?

Here's what I got so far:

```css
.background {
  height: 500px;
  background-color: #894325;
  background-image: -webkit-linear-gradient(-78deg, #894325 70%, #e9e9e9 30%);
}
```

```html
<div class="background">
</div>
```

It doesn't look remotely as it should? Am I using the wrong approach or?
Thank you!