是否可以在 CSS 中将以下形状创建为 DIV
。
浏览器支持不重要。
最佳答案
你不能像这样直接倾斜一个元素,你需要使用两个元素(或生成的内容)并隐藏某些溢出来使底部边缘平坦:
#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 向两个方向倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19958450/