gpt4 book ai didi

css - div 向两个方向倾斜

转载 作者:行者123 更新时间:2023-11-28 11:16:36 28 4
gpt4 key购买 nike

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

浏览器支持不重要。

slanted div in 2 directions

最佳答案

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

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 向两个方向倾斜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21728854/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com