使用CSS創建複雜的形狀

Question

我正在嘗試使用任意數量的技術創建一個像形狀的梯形，以便儘可能多。形狀我想創建這樣的形狀：

（會有裏面的造型含量[IMGS & TXT]）
到目前爲止，這樣做的可能方式是：遮蔽（webkit的）和SVG對html內容的影響（firefox）。但我似乎無法找到任何方式使這個工作與IE和歌劇。 所以如果有人能告訴我如何做到這一點，將不勝感激。

Answer 1

使用CSS創建非矩形形狀有幾個選項，但它們都是黑客。這不是你通常期望使用CSS的東西。

最着名的技術是使用邊框製作的三角形。這是非常黑客，並需要使用多個元素爲一個單一的形狀。我不會建議在生產網站上使用它。

我能想到的另一個CSS解決方案是使用極端border-radius設置來修改框的形狀。這是不太冒昧，但不會在IE8和更低，因此不符合您的標準。

你說你已經嘗試了SVG方法並放棄它，因爲它在IE8中不起作用。值得指出的是，雖然IE不支持SVG，但它支持VML，這是一種競爭性的矢量圖形格式。 SVG現在已經標準化了，所以VML將會消失，但是更老的IE將繼續支持它。

因此我想要的解決方案是默認使用SVG，而在IE7/8上使用VML。好消息是有幾個Javascript解決方案可以使這一切變得簡單。

一個是Raphael，它允許您使用Javascript繪製SVG/VML圖像。通常用於實時圖形等。

也有一些解決方案，簡單地將SVG轉換爲VML。例如http://code.google.com/p/svg2vml/。但還有其他幾種可用的。

希望有所幫助。

Answer 2

正如你所建議的，屏蔽和SVG是要走的路。這些將在未來的瀏覽器中得到支持。如果您必須向後兼容IE瀏覽器，請查看IE瀏覽器「過濾器」的CSS（谷歌「即過濾器」）。

被預先警告：這是非常不直觀的（與CSS3相比），通常是一個婊子工作。如果您的目標是使頁面看起來與CSS3版本完全相同，那麼將會很困難，並且您最好使用圖片。