如何在CSS3中實現梯形？

Question

我正在嘗試在CSS3中實現以下容器。 我嘗試了transform: skewY但是我沒有想要的結果。 我知道我可以使用3d變換來實現它，但是我要記住我們可愛的Internet Explorer。 我也嘗試玩偽元素，但我輸了。 我可以說有任何CSS規則可以增加右上角和右下角的高度嗎？

JSFiddle

謝謝

Answer 1

您可以為此使用偏斜的偽元素（確保偏斜在偽元素上，而不是元素本身）：

 div { position: relative; height: 200px; width: 80vw; margin: 10vw; } div:after { content: ""; position: absolute; top: 0; left: 0; height: 90%; width: 100%; -webkit-transform: skewY(5deg); -ms-transform: skewY(5deg); transform: skewY(5deg); background: gray; z-index: -1; } div:before { content: ""; position: absolute; height: 90%; width: 100%; left: 0; bottom: -20%; background: gray; -webkit-transform: skewY(-5deg); -ms-transform: skewY(-5deg); transform: skewY(-5deg); z-index: -1; } html { background: url(http://placekitten.com/g/300/300); } 

 <div>Content!!</div>