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

时间:2014-10-29 10:22:36

标签: html css responsive-design resize css-shapes

当我调整浏览器窗口大小时,我正在尝试调整梯形形状。我试图通过使用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>

1 个答案:

答案 0 :(得分:1)

您无法将百分比单位应用于边框,但您可以使用vw单位实现目标:

  

v + iewport宽度的1/100。 (source : MDN

<强> DEMO

&#13;
&#13;
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;
&#13;
&#13;

注意:我还将内联CSS移动到单独的样式表中,因为内联CSS不是推荐的。

IE9 + see canIuse支持

vw单位