如何使用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容器

回答

相关问题