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/。注意包装纸上的填充底部，该底部定义了比率。您可能必须尝试使用​​百分比金额。

#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);
}

关于css - div朝2个方向倾斜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21728854/