I have to accomplish following image by using CSS:

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

It's one image which will contain the main-navigation. So I wrote some CSS in order to do so (not the correct color-codes, I know): 

```
#menu-block {
  background: #730868;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#730868), to(#0a9f9d));
  background: -webkit-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -moz-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -ms-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -o-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  -pie-background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  behavior: url(/pie/PIE.htc);
}

```

And this code works great! It does what it has to do except for the arrow on the end... I honestly have no idea on how to tacle this issue.  

Should I create a second div in the shape of an arrow and guess the closest color? 

It should support IE8...