Slice Image using javascript / css

I'd like to cut images in diagonal with javascript / css but I don't know if I can achieve with non HTML5 code and if must be HTML5 if is cross browser.

Here is my design

http://www.behance.net/gallery/Redesign-GlobalPerformancecat/680358

Thanks for your help

X

Ok i will explain better,

the next website URL is not for advertising purposes

http://www.globalperformance.cat/

I'm trying to port from flash to html "Nosotros > Nuestro equipo" section, I know it's difficult, I can m开发者_开发技巧ake it simplier if needed, but I really want to leave flash when possible

The answer of your question is little tricky but I will try my best to explain it.

For cross browser compatibility you need to create an image which will be 50% transparent and 50% filled with the diagonal gradient you are using as background. Follow this screen shot I just created this for you, this image is self explanatory: http://screencast.com/t/LU5E1XPdhoJ

You also need to update your html code e.g.

<ul>
  <li> make this li tag position relative
    <div>
     place that half transparent image in this div and make this div position absolute and z-index 10 or higher
    </div>
     <img src="image.jpg" /> put actual image in this img tag
  </li>
</ul>