gpt4 book ai didi

html - 如何在浏览器窗口调整大小时调整 CSS 中梯形的大小

转载 作者:行者123 更新时间:2023-11-28 12:13:26 24 4
gpt4 key购买 nike

我试图在调整浏览器窗口大小时调整梯形形状的大小。我试图通过使用 box-resize 来做到这一点,但它仍然没有用。是否可以使用 border hack 定义/创建的梯形来做到这一点?当调整浏览器窗口大小时,还有什么其他方法可以使梯形具有调整大小的能力?

<body style="position:relative;height:500px;">
<div id="personal" style="position:relative;
background-color: red;
width:100%;
height:100%;">
<div id="floor" style="position:absolute; margin-top:10px;
border-bottom: 300px solid black;
border-left: 565px solid transparent;
border-right: 570px solid transparent;
height: 10%;
width: 100%;">
</div>
</div>
</body>

最佳答案

您不能将百分比单位应用于边框,但您可以使用 vw 单位来实现您的目标:

1/100th of the width of the v+iewport. (source : MDN)

DEMO

body {
position:relative;
height:500px;
margin:0;
padding:0;
}
#personal {
position:relative;
background-color: red;
width:100%;
height:100%;
}
#floor {
position:absolute;
top:10px;
border-bottom: 300px solid black;
border-left: 19vw solid transparent;
border-right: 19vw solid transparent;
height: 10%;
width: 60vw;
}
<body>
<div id="personal">
<div id="floor"></div>
</div>
</body>

注意:我也将您的内联 CSS 移到了单独的样式表中,因为不推荐使用内联 CSS。

vw 单位受 IE9+ 支持 see canIuse

关于html - 如何在浏览器窗口调整大小时调整 CSS 中梯形的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26627834/

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