当我调整浏览器窗口大小时，我试图调整梯形形状的大小。我试图通过使用来做到这一点box-resize但还是没用。是否可以通过使用定义/创建的梯形来做到这一点border黑客？还有什么其他方法可以使梯形能够在调整浏览器窗口大小时调整大小？
<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 units :
视口宽度的 1/100。 （来源：MDN https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths)
DEMO http://jsfiddle.net/webtiki/o0a5kanp/
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。
vwIE9+ 支持的单位参见canIuse http://caniuse.com/#feat=viewport-units
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
