如何使用CSS3轉換DIV容器

我嘗試轉換我的div容器，如下圖所示。如何使用CSS3轉換DIV容器

css perspec

左塗成黑色正常的div容器。在右邊是我想要的容器。

你知道如何在css3中解決這個問題嗎？我讀了一些關於css3中的「Polygon」屬性，但我也聽說這個屬性被刪除了。

編輯：當內容在框中時，它會被屏蔽 - 框就像「落在後面」。

2012-08-09 TJR

我發現了一個article在css-tricks.com對此而回。這可能有效：

#trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 
}

來源

2012-08-09 15:10:11 Viktor

謝謝。但我認爲這是行不通的。我會嘗試 - 但它解決了邊界。我需要在其中放入內容並「讓它掉落」 - 我用「rotateX 70deg」解決掉的秋天 - 但是容器只是「掉落」 - 但容器邊界不會「掉落」......它就像一個比以前更小的盒子 - 只是內容就像倒下了一樣。 – TJR 2012-08-09 15:13:54

非常感謝！它在加入roateX attribut時可以很好地工作。（：問題解決了！ – TJR 2012-08-09 15:17:23

沒問題，我還沒有弄清楚它是如何工作的，但我會及時的。 – Viktor 2012-08-09 15:29:31

#trapezoid { 
border-bottom: 100px solid black; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; width: 100px; }

檢查here更多的形狀和花樣

來源

2012-08-09 15:09:58

如何使用CSS3轉換DIV容器

回答

相關問題