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

问题描述：

在调整浏览器窗口大小时，我试图调整梯形形状。我试图通过使用 box-resize 来做到这一点，但仍然无法正常工作。是否可以通过使用 border hack定义/创建的梯形来做到这一点？调整浏览器窗口大小时，我还能通过其他方法使梯形具有调整大小的功能吗？

I'm trying to get the trapezoid shape resize when I resize browser's window. I was trying to do that by using box-resize but it still didn't work. Is it possible to do that with trapezoid defined/created by using border hack? What other way can I make trapezoid with the ability to resize when browser window is resized?

<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 个单位实现目标：

You can't apply percentage units to border but you can achieve your aim with vw units :

宽度的1/100 v + iewport。（源：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 单元请参见canIuse

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

相关推荐