CSS gradient on two-parted image

[vBulletin-Ultimate-Hacker]

I have to accomplish following image by using CSS:

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): \[code\]#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);}\[/code\]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...