当我调整浏览器窗口大小时,我正在尝试调整梯形形状。我试图通过使用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>
答案 0 :(得分:1)
您无法将百分比单位应用于边框,但您可以使用vw
单位实现目标:
v + iewport宽度的1/100。 (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;
}
&#13;
<body>
<div id="personal">
<div id="floor"></div>
</div>
</body>
&#13;
注意:我还将内联CSS移动到单独的样式表中,因为内联CSS不是推荐的。
IE9 + see canIuse支持 vw
单位