css - div朝2个方向倾斜

是否可以在 CSS 中创建以下形状作为DIV。

浏览器支持并不重要。

最佳答案

您不能直接使像这样的元素倾斜，您将需要使用两个元素(或生成的内容)并隐藏某些溢出以使底部平坦:

http://jsfiddle.net/6DQUY/1/

#skew {
    height: 240px;
    overflow: hidden;
}
.skew {
    background: #000;
    display: inline-block;
    height: 300px;
    width: 500px;
    margin-top: 100px;
    transform: skew(-8deg, -8deg);
}

注意:为了更好的可读性，我删除了跨浏览器的定义。

更新:这将是一个更流畅的示例，它将按设置的尺寸调整大小:http://jsfiddle.net/6DQUY/3/。请注意 wrapper 上的底部填充，该底部定义了比率。您可能必须尝试使用​​百分比金额。

#skew {
    padding-bottom: 20%;
    overflow: hidden;
    position: relative;
}
.skew {
    background: #000;
    position: absolute;
    top: 30%;
    right: 8%;
    left: 8%;
    height: 100%;
    transform: skew(-8deg, -8deg);
}