スライス画像javascript/cssを使用

Question

私はjavascript/cssで対角線で画像をカットしたいと思いますが、HTML5以外のコードで実現できるかどうか、クロスブラウザならHTML5でなければならないかどうかは分かりません。ここで

は、私はより良い説明します私のデザインあなたの助け

X

オクラホマため

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

おかげで、

次のウェブサイトのURLは、広告のためではありません目的

http://www.globalperformance.cat/

私は「Nosotros> Nuestro EQUIPO」セクションをHTMLにフラッシュからポートにしようとしている、私は必要に応じて、私はそれがsimplier作ることができ、それは難しいですけど、私は本当にとき

可能フラッシュを残したいです

Answer 1

あなたの質問の答えは少しトリッキーですが、私はそれを説明するために最善を尽くします。

ブラウザ間での互換性を確保するには、背景として使用している50％の透明度と50％の斜体のグラデーションで画像を作成する必要があります。このスクリーンショットに従ってください私はあなたのためにこれを作成しました。この画像は自明です：http://screencast.com/t/LU5E1XPdhoJ

また、あなたのHTMLコードを更新する必要があります。あなたの問題は、スタイリング1ない構造化されたものですので

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