div在2个方向倾斜 [英] div slanted in 2 directions

问题描述

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

Is it possible to create the following shape as a DIV in CSS.

浏览器支持并不重要。

推荐答案

直接，你需要使用两个元素（或生成的内容）并隐藏某些溢出，以使底部边缘平坦：

You cannot skew an element like this directly, you'll need to use two elements (or generated content) and hide certain overflow to make the flat bottom edge:

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

注意：我删除了跨浏览器定义以提高可读性。

Note: I removed the cross browser definitions for better readability.

更新：这将是一个更流行的示例，在设置维度调整大小： http://jsfiddle.net/6DQUY/3/ 。注意在定义比率的包装器上的填充底部。

UPDATE: This would be a more fluid example which resizes in set dimensions: http://jsfiddle.net/6DQUY/3/. Note the padding-bottom on the wrapper which defines the ratio. You may have to play around with the percentage amounts.

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

这篇关于div在2个方向倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！