如何創建一個包含IMG的DIV，其中DIV將圖像剪切成三角形，從而僅通過三角形顯示圖像的一部分。如何創建圖像的三角形容器（x瀏覽器）
所以..
<div>
<img src='some_image' />
</div>
當圖像是正方形，但是包含該圖像的DIV是三角形。 http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/解決這個很好，除了這個解決方案不是X瀏覽器友好（非即）。
http://css3pie.com/看起來很有趣，但是這依賴於PHP。
您不能創建非矩形的DOM元素。
有幾種方法可以破解它。
首先，有一種方法使用元素每邊變化寬度的CSS邊框，使其看起來像三角形。它仍然是一個矩形，但它看起來像一個三角形。
有這個在這裏的教程：http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
這種方法的下側是，它是有限的創造直角三角形。你可以加入其中的幾個來解決這個問題，但是你的圖像沒有一個容器。
這樣做的替代方法就是將旋轉的元素放置在主要元素的頂部，以便它們覆蓋圖像的相應部分並使其看起來像三角形。這適用於所有的瀏覽器，儘管IE確實有一些非常令人討厭的旋轉語法，並且在瀏覽器上很重要，因爲你只能用它來製作圖形。
另一種選擇可能是使用CSS轉換。然而，這隻有少數最新的瀏覽器支持，所以它不適用於大多數用戶。
更好的方法可能是爲此使用適當的圖形庫，而不是試圖將它變成一個<div>元素。我想推薦使用Raphael。這是一個JavaScript庫，可以使用SVG（或VML for IE）直接繪製到瀏覽器中。使用它創建三角形並用圖形填充三角形是很簡單的。請參閱Raphael主頁上的示例以幫助您入門。
根據你想要的結果，據我所知，你不能做一個三角形的DIV沒有Transform:;然而，一個解決方案是將一個div放置在問題的div內，PNG切割的一半圖像只顯示透明部分。不知道這對你來說是否可行。
對於你的問題，CSS3Pie不會有什麼用處。然而，你說它依賴於PHP是錯誤的;它沒有。 – Spudley 2011-04-15 16:19:08
我剛剛意識到，它不需要PHP，我的錯誤。然而，CSS3PIE可以將複雜的CSS3轉換爲IE可以理解的東西，它可以解決我的問題，但它似乎不支持transform/matrix，無論如何，Raphael看起來像一個非常可行的選項。 – 2011-04-15 19:35:10