多形性CSS圖層\非矩形CSS層

Question

是有可能使形如下面的圖像CSS層...

我知道我們可以有這樣的形狀，並用透明圖像我們可以有層的形狀像這些...但沒有我希望CSS層到像這些形狀的實際邊界...有沒有一種方法的CSS，jQuery或任何東西....

注意：'像這些形狀我的意思不只是這三個例子，但我可以定義的形狀'

Answer 1

如果你需要HTML中的形狀，那麼你應該嵌入或生成SVG。你可能想看看Raphaël。

正常的HTML和CSS只會渲染矩形。

Answer 2

CSS是一種用於設計文檔樣式的語言，而不是它們的語義結構。人類，沒有什麼被稱爲「CSS層」或「CSS形狀」。您的HTML文檔中的對象（包括有時被錯誤地稱爲「圖層」的div）可以指定它們是顯示在其他對象的前面還是後面，從而給出「圖層」的錯覺。

而且，沒有對象和可能具有任意形狀的通用HTML文檔。有時你可能會通過結合大量已知的小形狀來破解標準盒子的形狀，從而做出創造性的東西，例如slants hack。

您可能正在尋找的東西類似於HTML5中的新canvaselement以及其他向量圖形解決方案（如SVG）。

Answer 3

沒有直接的方式來操縱DOM元素的形狀 - 所有元素都是矩形（如果它們是display:block;）或由它們的文本內容（如果它們是display:inline;）塑造的。

HTML DOM圍繞矩形框旋轉，所以你不會得到任意形狀的框。

這完全取決於你想要做什麼。如果你只想繪製形狀，那麼你最好使用canvas，SVG或VML，這取決於你想要做什麼以及你需要的瀏覽器支持。

畫布是一種HTML5技術，它基本上爲您提供了一個瀏覽器中的繪圖板，您可以使用Javascript進行繪製。它允許您創建和製作2D像素藝術。

SVG和VML是矢量圖形語言。他們執行大致相同的任務，但VML特定於Internet Explorer，而其他大多數瀏覽器都支持SVG。 （IE9也將支持SVG，但尚未廣泛使用）。再次，您可以使用Javascript來處理這些問題，以跨瀏覽器的方式執行此操作的最佳方式是使用Raphael libraray，它可以爲您提供一個創建圖形的API，然後在後臺將其轉換爲VML或SVG到瀏覽器。

您當然也可以爲您的箱子設計一個背景圖形，使其具有您想要的形狀，並使用形狀外的透明區域，並且只使用箱子內的區域。它不會是一個多邊形的盒子，但是如果你做得對，它看起來就好。

如果你真的想用CSS來做 - 也許有一個框可以讓其他文本元素順暢地包裹起來，你會很困難。有幾個黑客可以用來實現這些效果，但是他們都不是你正在尋找的東西。

一個選項可能是CSS轉換：這允許您旋轉/傾斜/等一個盒子。下面是箱子仍然是盒子形狀（所以沒有多邊形），內容是旋轉和歪斜以及框輪廓，所以可能不適合你想要做的。此外，它可能不適用於所有瀏覽器，但可以在大多數情況下使用。

通過調整邊框樣式，可以創建具有假對角邊緣的框。例如http://www.cssplay.co.uk/menu/tree.html就是一個很好的例子。但是，這並不完美。

除此之外，您只需創建多個框並將它們放置爲與您要實現的形狀最接近的匹配。

希望有所幫助。

Answer 4

您可以通過CSS在最近的Safari，Chrome瀏覽器，Firefox和Opera做的第一形狀（平行四邊形式的東西）轉換：

• http://webkit.org/blog/130/css-transforms/
• https://developer.mozilla.org/En/CSS/Using_CSS_transforms
• （www.opera.com已關閉的時刻，但你要http://www.opera.com/docs/specs/presto26/css/transforms/）
• http://hacks.mozilla.org/2009/06/3d-transforms-isocube/

除此之外，沒有。 CSS全是關於矩形的。