使用javascript / css切片图像

Question

我想用javascript / css对角切割图像，但我不知道是否可以用非HTML5代码实现，如果是跨浏览器必须是HTML5。

这是我的设计

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

感谢您的帮助

X

好的，我会更好地解释，

下一个网站网址不用于广告目的

http://www.globalperformance.cat/

我正在尝试从flash移植到html“Nosotros＆gt; Nuestro equipo”部分，我知道这很困难，如果需要我可以让它变得更简单，但我真的想在可能的情况下留下闪光灯

Answer 1

你的问题的答案有点棘手，但我会尽力解释。

对于跨浏览器兼容性，您需要创建一个50％透明的图像，并使用您用作背景的对角渐变填充50％。按照我刚刚为您创建的此屏幕截图，此图像是自解释的：http://screencast.com/t/LU5E1XPdhoJ

您还需要更新您的HTML代码，例如

<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>