css - div 向两个方向倾斜

Question

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

浏览器支持不重要。

Answer 1

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

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